Введение в CSS

Почему CSS назвали «Каскадными Таблицами Стилей» наверное, уже некто не узнает. Дело в том, что правильным переводом являлось бы «Каскадные Листы Стилей». Однако, вследствие того, что большинство предпочитает называть и сами файлы и технологию аббревиатурой CSS, большой беды в укоренившемся переводе - «Каскадные Таблицы Стилей» - нет.

Для того, что бы эффективно использовать CSS, он же Cascading Style Sheets необходимо хоть немного понимать, зачем CSS создавался. Изначально HTML задумывался как язык логического форматирования документов. Это означало, что в различных документах будут выделяться элементы, эквивалентные логически. Так же предполагалось, что данные элементы будут представлены в различных браузерах более или менее одинаково.

Однако по мере развития сети Internet стало ясно, что высказываний относительно приблизительно одинакового форматирования уже не достаточно. Перед дизайнерами, и как следствие программистами, встала задача более тонкой настройки форматирования HTML-элементов.

До появления каскадных таблиц стилей у web-программиста был только один выход. Программист был вынужден прописывать множество тегов форматирования, обрамляя ими любой элемент, который должен был выглядеть определенным образом. В результате документ представлял собой нагромождения тегов (в некоторых документах на долю тегов приходилось до 80% объема документа).

Каскадные таблицы стилей позволили дизайнеру точно настраивать вид тех или иных элементов HTML-документов. Фактически каскадные таблицы стилей являются инструментом, определяющим визуальное представление логических элементов HTML-документов.


Cвязывание c документом

Категория: Cвязывание c документом

Данный раздел как раз и посвящен методам включения внутренних каскадных таблиц стилей в HTML-документы и связывания внешних каскадных таблиц стилей с HTML-документами.

  • Внешние таблицы стилей >>>
  • Внедрение в теге Style >>>
  • Директива @import >>>
  • Атрибут Style >>>


Внешние таблицы стилей

Термин внешняя используется для того, что бы указать, что таблица стилей описана где-то еще, а в данном HTML-документе есть только указание, где находится эта таблица стилей. В данном случае фактически таблица стилей оформляется как отдельный файл, без какого-либо обрамления ее тегами или другими конструкциями. В заголовке HTML-документа (между открывающим и закрывающим тегом head) используется одна из форм тега link для указания URL файла с таблицей стилей.

Использование внешней, по отношению к текущему HTML-документу, таблицы стилей имеет ряд преимуществ по сравнению с другими методами использования таблиц стилей. Одним из основных достоинств такого использования таблиц стилей является возможность задать стили сразу для большого количества HTML-документов, указав во всех этих HTML-документах одну таблицу стилей. Благодаря этому появляется возможность изменить какой-либо стиль во всех HTML-документах, просто изменив данный стиль один раз во внешней таблице стилей, на которую ссылаются все эти HTML-документы. Синтаксис расширения тега , используемый в HTML-документе для указания внешней таблицы стилей:

Необязательный атрибут media используется для указания типа устройства, при отображении на котором, будет использоваться данная таблица стилей. При использовании другого устройства данная таблица будет игнорироваться. Если атрибут media не задан, то таблица стилей применяется при выводе на любой тип устройства. Подробнее смотри Аппаратно-зависимые таблицы стилей.

<link rel=stylesheet type=text/css href="URL таблицы стилей.css" [media="устройство"]>

Формат внешней таблицы стилей состоит просто из списка правил, без какого либо обрамления, принятым расширением таблиц стилей является .css. Mime-типом таблицы каскадных стилей должно быть text/css:

 ... правило ...
 ... правило ...

Далее приведен пример использования внешней таблицы стилей, расположенной по адресу http://webber.ru/_styles/_/ie-6xx.css:

<html>
 <head>
  <link rel=stylesheet type=text/css href="http://webber.ru/_styles/_/ie-6xx.css">
 </head>
 ...


Внедрение в теге Style

Тег <style> размещается в заголовке HTML-документа (между тегами <head> и </head>) и содержит определения стилей для данного HTML-документа. Это означает, что стили определенные при помощи данного тега имеют областью действия только данный HTML-документ. Тег <style> является контейнером, то есть имеет открывающий и закрывающий теги, между которыми и расположены объявления стилей. Синтаксис объявления стилей с его помощью приведен ниже:

<style type=text/css>
  ...правило...
  ...правило...
  ...правило...
 </style>

Далее приведен пример использования таблицы стилей, определяющей стиль заголовков первого уровня (то есть заголовков, определяемых тегом <h1>) как жирный и красного цвета:

<html>
 <head>
  <style type=text/css>
   h1  {font-weight:bold; color:red;}
  </style>
 </head>
 <body>
  <h1>Жирный заголовок красного цвета </h1>
 </body>
<html>

Данный способ определения стилей идеально подходит для корректировки или внедрения стилей в отдельные HTML-документы, так как не затрагивает другие HTML-документы.


Директива @import

Для того, что бы включить в таблицу стилей, определяемую где-либо, другую таблицу стилей, определяемую как внешний объект, можно использовать директиву @import. Синтаксис директивы:

 @import url(URL таблицы стилей.css) [устройство]

Механизм действия данной директивы достаточно прост. При просмотре программой браузера данная директива будет заменяться той таблицей, на которую она указывает. Очевидно, что данную директиву можно использовать не только в HTML-документе, но и во внешней каскадной таблице стилей. При помощи данного метода можно создать древообразную структуру стилей. Данная директива должна использоваться до объявления правил.

Это позволяет использовать принцип модульности при разработки таблиц стилей, размещая отдельные таблицы стилей в разных файлах, и при необходимости собирать их вместе при помощи директивы @import. Следующий пример показывает использование трех директив @import для импорта трех таблиц стилей в HTML-документ:

Необязательное поле «устройство» используется для указания типа устройства,при отображении на котором, будет подключаться импортированная таблица стилей. При использовании другого устройства импортированная таблица будет игнорироваться. Если данный аргумент не задан, то таблица стилей импортируетсяпри выводе на любой тип устройства. Подробнее смотри Аппаратно-зависимыетаблицы стилей.

 <html>
  <head>
   <style type=text/css>
    @import url(URL первой таблицы.css)
    @import url(URL второй таблицы.css)
    @import url(URL третьей таблицы.css)
   </style>
  ...
  ...


Атрибут Style

Иногда возникает необходимость настроить внешний вид одного элемента. В таких случаях приходится задавать правило для единственного элемента (см. Селекторы элементов), что приводит к большим накладным расходам и загромождает таблицы стилей. Другим возможным вариантом является использование атрибута style, который может быть использован с любым отображаемым тегом. Синтаксис использования атрибута style:

<tag_name style="декларация стиля" ...>

Пример: Ниже приведен пример, задающий тегу заголовка, к которому он применен, красный цвет и жирное начертание:

<h1 style = "color:red; font-weight:bold;">Красный и жирный заголовок</h1>


Группы CSS-свойств

Категория: Группы CSS-свойств

Свойства CSS, распределенные по функциональным группам.

  • Свойства текста>>>
  • Свойства цвета и фона>>>
  • Блочные свойства>>>
  • Свойства списков>>>
  • Свойства шрифтов>>>
  • Разные свойства>>>
  • Свойства scrollbar>>>
  • Свойства позиционирования>>>
  • Свойства таблиц>>>
  • CSS Свойства >>>


Свойства текста

Категория: Свойства текста

Данное семейство css-свойств используется для определения характеристик шрифта, таких как жирность, наклон, тип начертания и так далее, и характеристик текста, таких как высота строки, горизонтальные размеры пробелов, преобразование регистра букв и так далее.

  • Свойство word-spacing >>>
  • Свойство letter-spacing >>>
  • Свойство text-decoration >>>
  • Свойство vertical-align >>>
  • Свойство text-transform >>>
  • Свойство text-align >>>
  • Свойство text-indent >>>
  • Свойство line-height >>>
  • Свойство white-space >>>
  • Свойство text-overflow >>>
  • Свойство word-wrap >>>
  • Свойство text-align-last >>>
  • Свойство writing-mode >>>


Свойство word-spacing

Свойство word-spacing указывает на дополнительное расстояние между словами. Значение может быть отрицательным, но могут быть, зависящие от реализации, ограничения. Браузеры свободны в выборе конкретных алгоритмов настройки пробелов. Так же на размер пробелов может влиять выравнивание по ширине выставленное при помощи свойства text-align.

Синтаксис
word-spacing: inherit | normal | «длина»
Возможные значения и ключевые слова
inherit | значение родительского элемента
normal | дополнительное место для пробелов не выделяется
«длина» | размер дополнительного места
Разное
Значение по умолчанию | normal
Применимо | ко всем элементам
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере, при помощи свойства word-spacing, расстояние между словами в абзаце (тег p) увеличивается на 9 пикселей (9px). Но, после «выравнивания по ширине» (значение justify свойства text-align), реальные значения расстояний между словами могут отличаться от заданных при помощи свойства word-spacing:

 p {word-spacing:9px}

Примечание: Браузеры могут трактовать любое значение данного свойства как normal.

Примечание: Свойство word-spacing поддерживается Internet Explorer 6.0.

Примечание: Свойство word-spacing поддерживается Opera 6.0.

Примечание: Свойство word-spacing поддерживается Netscape Navigator 6.0.


Свойство letter-spacing

Свойство letter-spacing указывает дополнительное расстояние между буквами. Значение может быть отрицательным, но могут быть, зависящие от реализации, ограничения. Браузеры свободны в выборе конкретных алгоритмов настройки пробелов. Так же на расстояние между букв может влиять «выравнивание по ширине» выставленное при помощи свойства text-align.

Когда свойство letter-spacing имеет значение normal, браузер может самостоятельно изменять расстояние между буквами для выравнивания текста по ширине. Этого не произойдет, если расстояние прямо выставлено в числовое значение.

Синтаксис
letter-spacing: inherit | normal | «длина»
Возможные значения и ключевые слова
inherit | значение родительского элемента
normal | дополнительное расстояние не выделяется
«длина» | размер дополнительного расстояния между буквами
Разное
Значение по умолчанию | normal
Применимо | ко всем элементам
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере, при помощи свойства letter-spacing, увеличивается расстояние между буквами на 3 пикселя (3px) для заголовка первого уровня (тег h1):

 h1 {letter-spacing:3px}

Примечание: Браузеры могут трактовать любое значение данного свойства как normal.

Примечание: Свойство word-spacing поддерживается Internet Explorer 4.0.

Примечание: Свойство word-spacing поддерживается Opera 6.0.

Примечание: Свойство word-spacing поддерживается Netscape Navigator 3.5.


Свойство text-decoration

Свойство text-decoration описывает эффекты, которые будут применены к текстовому содержимому элемента. Если элемент не имеет текста (например, тег img) или элемент является пустым (например, конструкция <em></em>), то на такой элемент не будет оказано никакого эффекта. Цвета, необходимые для создания эффекта, предоставляются свойством color.

Свойство text-decoration не наследуется, но эффект оказываемый на дочерний элемент должен совпадать с эффектом, оказываемым на сам элемент. Например, если родительский элемент подчеркнут, то и дочерний элемент должен быть подчеркнут, даже если для него не указано свойство text-decoration. Значением данного свойства может быть либо ключевое слово none, убирающее любое форматирование, либо любая комбинация других ключевых слов.

Синтаксис
text-align: inherit | none | [ underline || overline || line-through || blink ]
Возможные значения и ключевые слова
inherit | значение родительского элемента
none | эффекты отсутствуют
blink | текст элемента мигает
underline | текст элемента подчеркнут (линия проходит под текстом)
overline | текст элемента надчеркнут (линия проходит над текстом)
line-through | текст элемент зачеркнут (линия проходит через текст)
Разное
По умолчанию | none
Применимо | ко всем элементам
Наследование | нет (смотри описание)
Процентное значение | не применимо
Media |

В следующем примере заголовки <h1> форматируются подчеркнутыми и перечеркнутыми. Пример так же демонстрирует возможность сочетания эффектов:

h1 {text-decoration: underline line-through}

Примечание: браузеры обязаны корректно распознавать значение blink данного свойства, но не обязаны его поддерживать.

Примечание: Internet Explorer 5.0 использует во вложенных элементах цвет именно вложенных элементов, а не цвет элемента, в котором задано данное свойство.


Свойство vertical-align

Свойство vertical-align позволяет настроить вертикальное положение элемента и его выравнивание относительно высоты родительского элемента, или той строки, в которой данный элемент находится.

Если для свойства vertical-align используется процентное значение, то базовая линия элемента приподнимается над базовой линией родительского элемента на значение равное высоте элемента (то есть свойству line-height), умноженному на процентное значение. Допускаются отрицательные значения, которые приведут к тому, что элемент будет не приподнят над базовой линией родительского элемента, а опущен.

Синтаксис
vertical-align: inherit | baseline | sub | super | top | text-top | middle | bottom | text-bottom | «процентное значение»
Возможные значения и ключевые слова
inherit | значение родительского элемента
baseline | выравнивает базовую линию элемента (или его основание, если нет базовой линии) по базовой линии родительского элемента
middle | выравнивает середину элемента (обычно изображения) с базовой линией родительского элемента плюс 0.5 ex (смотри единицы длины)
sub | подстрочный индекс
super | надстрочный индекс
text-top | выравнивает вершину элемента с вершиной родительского элемента
text-bottom | выравнивает основание элемента с основанием родительского элемента
top | выравнивает вершину элемента с вершиной самого высокого элемента в строке
bottom | выравнивает основание элемента с основанием самого низкого элемента в строке
«процентное значение» | задает сдвиг базовой линии элемента от базовой линии родительского элемента (смотри пояснение в тексте)
Разное
По умолчанию | baseline - по умолчанию отступ отсутствует
Применимо | к строчным элементам
Наследование | нет
Процентное значение | относительно свойства line-height самого элемента
Media | visual

Следующий пример описывает класс «upper», приподнимающий, при помощи свойства vertical-align, базовую линию элемента над базовой линией родительского элемента на 100%:

.upper {vertical-align:100%}

Примечание: использование ключевых слов top и bottom способно породить неразрешимую ситуацию, в которой значения элементов образуют круговую зависимость.


Свойство text-transform

Свойство text-transform позволяет взаимно преобразовывать строчные и заглавные буквы. В качестве значения используется одно из ключевых слов. Алгоритм преобразования зависит от используемого национального языка.

Синтаксис
text-transform: inherit | capitalize | uppercase | lowercase | none
Возможные значения и ключевые слова
inherit | значение родительского элемента
capitalize | делает заглавной первую букву каждого слова
uppercase | делает все буквы заглавными
lowercase | делает все буквы строчными
none | отменяет действие данного свойства
Разное
Значение по умолчанию | none
Применимо | ко всем элементам
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере осуществляется форматирование заголовков первого уровня (тег h1) заглавными буквами, у заголовков второго уровня (тег h2) - делает заглавной первую букву каждого слова. У параграфов (тег p) - все буквы делает строчными:

h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p  {text-transform:lowercase}


Свойство text-align

Свойство text-align используется для указания, как будет выравниваться текст внутри элемента. Конкретный алгоритм, используемый свойством text-align для выравнивания, определяется браузером и используемым национальным языком.

Синтаксис
text-align: inherit | left | right | center | justify
Возможные значения и ключевые слова
inherit | значение родительского элемента
left | выравнивание по левому краю
right | выравнивание по правому краю
center | выравнивание по центру
justify | выравнивание по ширине
Разное
Значение по умолчанию | зависит от браузера
Применимо | к блочным элементам
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере для параграфов (тег p) задается, с помощью свойства text-align, выравнивание по ширине:

 p {text-align:justify}

Примечание: Браузеры могут трактовать значение justify свойства text-align как значения left или right, в зависимости от национального направления письма.

Примечание: Выравнивание осуществляется относительно ширины элемента, а не ширины обрамления.


Свойство text-indent

Свойство text-indent используется для формирования отступа красной строки (то есть первой строки в абзаце). Значение свойства text-indent может быть отрицательным, но могут существовать, зависящие от реализации, ограничения.

Синтаксис
text-indent: inherit | «размер» | «процентное значение»
Возможные значения и ключевые слова
inherit | значение родительского элемента
«размер» | линейный размер отступа
«процентное значение» | по отношению к ширине родительского элемента
Разное
Значение по умолчанию | 0
Применимо | к блочным элементам
Наследование | да
Процентная запись | по отношению к ширине родительского элемента
Media | visual

В следующем примере для параграфов (тег p) задается, с помощью свойства text-indent, отступ красной строки в 12 пикселей.

 p {text-indent:12px}

Примечание: Отступ не вставляется в середину элемента, после разрыва определенного автором ( например при помощи тега br).


Свойство line-height

Свойство line-height задает высоту строки символов. Отличается от размера шрифта тем, что задает расстояние между базовыми линиями текста, а не размер символов. Отрицательные значения для свойства line-height не допустимы.

Значение normal устанавливает межстрочный интервал в «нормальное» значение. Предполагается, что браузеры будут использовать значение 1.0 - 1.2 от размера шрифта для этого ключевого слова.

Синтаксис
line-height: inherit | normal | «number» | «length» | «percentage»
Возможные значения и ключевые слова
inherit | значение родительского элемента
normal | устанавливает значение данного свойства в нормальное значение
«number» | значение, умноженное на размер шрифта.
«length» | значение, точно указанное в единицах длины
«percentage» | относится к размеру шрифта элемента
Разное
Значение по умолчанию | normal
Применимо | ко всем элементам
Наследование | да
Процентное значение | относится к размеру шрифта элемента
Media | visual

В следующем примере задается, при помощи свойства line-height, межстрочный интервал для параграфов (тег p), равный 50%. Так как процентное значение вычисляется от размера шрифта (свойство font-size) – строки будут наползать друг на друга:

 p {line-height:50%}

Примечание: Числовое значение свойства line-height определяет межстрочное расстояние как размер шрифта, умноженный на данное значение. Отличается от процентного значения тем, что при наследовании наследуется имено сам параметр, а не вычисленное с его помощью значение.


Свойство white-space

По умолчанию, когда браузер встречает несколько пробельных символов, он преобразует их в один пробельный символ. Так же браузер разбивает длинные строки текста, встретив пробельный символ. Используя некоторые теги можно добиться другой обработки пробельных символов. Свойство white-space как раз и определяет метод, при помощи которого браузер обрабатывает пробельные символы.

Синтаксис
white-space: inherit | normal | pre | nowrap
Возможные значения и ключевые слова
inherit | значение родительского элемента
normal | классический вариант обработки
pre | несколько пробельных символов, идущих последовательно, не преобразуются в один.
nowrap | перенос осуществляется только принудительно при помощи специальных тегов.
Разное
Значение по умолчанию | normal
Применимо | к блочным элементам
Наследование | да
Процентная запись | не применима
Media | viasaul

В следующем пример для абзацев (тег p), при помощи свойства white-space, задается режим отображения без автоматических переносов.

 p {white-space:nowrap;}

Примечание: Internet Explorer 6.0 поддерживает значение pre, если установлен режим совместимости со стандартом CSS.

Примечание: Браузеры могут игнорировать свойство white-space в авторских и пользовательских листах стилей, используя внутреннее значение по умолчанию.


Свойство text-overflow

Свойство text-overflow используется для задания режима усечения текстовых строк, если текстовая строка превосходит допустимую ширину и отсутствует возможность переноса. В приведенном выше случае свойство text-overflow позволяет выбрать один из режимов усечения: либо текстовая строка усекается обычным методом, описанным в свойстве overflow, либо текстовая строка, непосредственно перед усечением дополняется троеточием «…».

Синтаксис
text-overflow: inherit | ellipsis | clip
Возможные значения и ключевые слова
inherit | значение родительского элемента
clip | стандартный метод усечения
ellipsis | метод усечения с использованием троеточия
Разное
По умолчанию | clip
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В данном примере для заголовков первого уровня (тег h1) задана ширина в 100 пикселей. Все что, не умещается в этот диапазон, будет усечено с добавлением троеточия.

h1 {width:100px;overflow:hidden;text-overflow:ellipsis;}

Примечание: Данное свойство не является стандартным свойством, определенным в спецификации CSS2.

Примечание: Данное свойство поддерживается Internet Explorer 6x.


Свойство word-wrap

Свойство word-wrap определяет, будут ли разрываться слова для переноса или нет. Cвойство word-wrap оказывает влияние только на элементы, которые имеют заданную ширину, на блочные элементы и на абсолютно позиционированные элементы.

Синтаксис
clear: inherit | normal | break-word
Возможные значения и ключевые слова
inherit | значение родительского элемента
normal | слова не разрываются
break-word | при необходимости слова разрываются и переносятся на следующую строку
Разное
Значение по умолчанию | normal
Применимо | ко всем элементам
Наследование | нет
Процентная запись | не применима
Media | visual

Для параграфов (тег p) задан разрыв слов для переноса.

 p {word-wrap:break-word;}

Примечание: Данное свойство является расширением, введенным компанией Microsoft и поддерживается браузером Internet Explorer, начиная с версии 5.5.


Свойство text-align-last

Свойство text-align-last используется для указания того, как будет выравниваться последняя или единственная строка в текстовом блоке. Если для свойства text-align задано значение, отличное от «auto», то последняя или единственная строка в текстовом блоке будет выравниваться согласно значению свойства text-align-last, а не значению свойства text-align. Конкретный алгоритм, используемый свойством text-align-last для выравнивания, определяется браузером и используемым национальным языком.

Синтаксис
text-align-last: inherit | auto | left | right | center | justify
Возможные значения и ключевые слова
inherit | значение родительского элемента
auto | выравнивание по значению свойства text-align
left | выравнивание по левому краю
right | выравнивание по правому краю
center | выравнивание по центру
justify | выравнивание по ширине
Разное
Значение по умолчанию | зависит от браузера
Применимо | к блочным элементам
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере для параграфов (тег p) задается, с помощью свойства text-align-last, выравнивание по правому краю для последней или единственной линии:

p {text-align-last: right;}

Примечание: Данное свойство не является стандартным свойством, определенным в спецификации CSS2.

Примечание: Данное свойство поддерживается Internet Explorer 5.5.


Свойство writing-mode

Свойство writing-mode используется для указания алгоритма разметки. Возможны два варианта, обозначаемые сокращениями lr-tb и tb-rl:

  • Первый вариант (lr-tb). Текст размещается горизонтально слева направо и сверху вниз. Следующая горизонтальная строка размещается под предыдущей. Символы размещаются вправо и вверх от начала базовой линии. Данный алгоритм используется в типографии латинских языков.
  • Второй вариант (tb-rl). Текст размещается вертикально сверху вниз и справа налево. Следующая вертикальная строка размещается слева от предыдущей. «Широкие» символы (в частности иероглифы) записываются вправо и вверх. «Узкие» символы – так же известные как латинские символы и узкие символы «Kana» поворачиваются на 90 градусов по часовой стрелке. Данный алгоритм используется в типографиях Восточной Азии.

Свойство writing-mode наследуется всеми элементами за исключением элементов: button, caption, input, isindex, option, textarea. Влияние этого свойства не накапливается. В частности если у родительского элемента и у дочернего элемента свойство writing-mode установлено в значение «tb-rl» - символы будут повернуты только один раз.

Синтаксис
writing-mode: inherit | tb-rl | tb-rl
Возможные значения и ключевые слова
inherit | значение родительского элемента
lr-tb | направление письма слева направо, сверху вниз
tb-rl | направление письма сверху вниз, справа налево
Разное
Значение по умолчанию | lr-tb
Применимо | ко всем
Наследование | да, за исключением элементов: button, caption, input, isindex, option, textarea
Процентная запись | не применима
Media | visual

В следующем примере для параграфов (тег p) задается, с помощью свойства writing-mode, направление письма, используемое в Восточной Азии:

p {writing-mode: tb-rl;}

Примечание: Данное свойство не является стандартным свойством, определенным в спецификации CSS2.

Примечание: Данное свойство поддерживается Internet Explorer 5.5.


Свойства цвета и фона

Категория: Свойства цвета и фона

Информация по css-свойствам, определяющим цвет и фон элементов.

  • Свойство color >>>
  • Свойство background-color >>>
  • Свойство background-image >>>
  • Свойство background-repeat >>>
  • Свойство background-attachment >>>
  • Свойство background-position >>>
  • Свойство background >>>
  • Свойство background-position-x >>>
  • Свойство background-position-y >>>
  • Свойство layer-background-color >>>
  • Свойство layer-background-image >>>
  • Свойство -moz-opacity >>>


Свойство color

Свойство color определяет цвет текста (часто называемый foreground). Существует несколько способов задания цвета. Подробнее смотри Представление цвета. В CSS свойство color занимает особенное место. Дело в том, что многие другие css-свойства наследуют или используют значение свойства color другим способом.

Синтаксис
color: »color«
Возможные значения и ключевые слова
»color« | любое возможное обозначение цвета
Разное
По умолчанию | не определено - зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

В следующем примере для заголовков третьего уровня (тег h3) свойством color задается красный цвет:

 h3 {color:red}


Свойство background-color

Свойство background-color устанавливает цвет фона или делает цвет фона прозрачным. Фактически свойство background-color аналогично параметру bgcolor в HTML. Методы определения цвета смотри в Представление цвета.

Синтаксис
background-color: «color» | transparent
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
transparent | задает прозрачный фон
Разное
По умолчанию | transparent
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере для каждого из элементов, определяемых тегами table, tr и th, при помощи свойства background-color задан свой цвет фона. Для таблицы (определяемой тегом table) задан серый цвет (правило background-color: grey), для строк таблицы (тег tr) задан фон зеленого цвета (правило background-color: green), а для ячеек заголовка (тег th) выбран белый фон (правило background-color: white):

 table {background-color:grey}
 tr    {background-color:green}
 th    {background-color:white}


Свойство background-image

Свойство background-image определяет графический ресурс, используемый в качестве фона. При этом, если в графическом ресурсе наличествуют прозрачные облости, то цвет этих областей определяется нежележщими элементами или свойством background-color.

Синтаксис
background-image: «url» | none
Возможные значения и ключевые слова
«url» | url графического элемента, используемого в качестве фона
none | отменяет действие данного атрибута
Синтаксис
Значение по умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, при помощи свойства background-image, для таблицы (тег table) назначается изображение из файла «chess.png» в качестве фонового изображения:

 table {background-image:url(chess.png);}

Примечание: В NetScape Navigator версии 4.x свойство background-image наследуется всеми потомками элемента, в отличае от указаний стандарта.


Свойство background-repeat

Если указано свойство background-image то значение свойства background-repeat указывает будет ли повторятся графический элемент, используемый в качестве заднего фона, и если будет - то как будет повторятся.

Синтаксис
background-repeat: repeat | repeat-x | repeat-y | no-repeat
Возможные значения и ключевые слова
repeat | рисунок повторяется и по вертикали и по горизонтали
repeat-x | рисунок повторяется только по горизонтали
repeat-y | рисунок повторяется только по вертикали
no-repeat | рисунок не повторяется (то есть выводится только один раз)
Разное
По умолчанию | repeat
Применимо | ко всем элементам
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере, при помощи свойства background-repeat, для таблицы (тег table) выбирается режим размножения фонового изображения только по вертикали. Размножаемое изображение задается свойством background-image.

 table {background-repeat: repeat-y; background-image: url(chess.png);}

Примечание: Свойство background-repeat не поддерживается браузером Netscape Navigator версий 4.x.


Свойство background-attachment

Свойство background-attachment определяет, должно ли изображение фона, заданного свойством background-image быть зафиксированным относительно канвы или перемещаться вместе с контентом.

Если свойство background-image не заданно, то данное свойство не оказывает никакого действия. Браузеры могут трактовать значение fixed как scroll, однако рекомендуется использовать эти значения корректно, по крайней мере для тегов html и body, так как не существует возможности задать изображение только для тех браузеров, которые корректно поддерживают данное свойство.

Синтаксис
background-attachment: scroll | fixed
Возможные значения и ключевые слова
scroll | изображение фона зафиксировано относительно содержания и перемещается относительно канвы.
fixed | изображение зафиксировано относительно канвы.
Разное
Значение по умолчанию | fixed
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

Следующий пример демонстрирует использование свойства background-attachment для фиксации фона html-документа (тег body). Фоновое изображение задается свойством background-image.

 body {background-attachment: fixed; background-image: url(chess.png);}

Примечание: NetScape Navigator версии 4.x не поддерживает данное свойство.


Свойство background-position

При помощи свойства background-position дизайнер может указать расположение графического элемента, используемого в качестве фона (см background-image). Значение свойства background-position может быть задано либо как одно или два значения, представляющие собой единицы длины или процентные значения, либо как одно или два ключевых слова. Если задано только одно значение длины или процентное значение, то оно рассматривается как положение по горизонтали, в то время как положение по вертикали устанавливается в значение 50%.

Если заданы ключевые слова top, right, bottom или left, с парой или без, то устанавливается соответственно положение по вертикали или горизонтали. Если задано одно или два ключевых слов center, то устанавливается значение 50% 50%. Если с ключевым словом center используются ключевые слова left или right, то ключевое слово center относится к положению по вертикали. Если ключевое слово center используется с ключевыми словами top или bottom, то ключевое слово center относится к положению по горизонтали.

Синтаксис
background-position: [«проценты» | «длина»]{1,2} | [top | center | bottom] || [left | center | right]
Возможные значения и ключевые слова
«длина» | расстояние от верхнего или левого края элемента до начала фонового изображения
«проценты» | процентное значение, указывает смещение фонового изображения по длине или ширине.
top | верхняя граница фонового изображения совпадает с верхней границей элемента
center | фоновое изображение центрировано по вертикали или горизонтали
bottom | нижняя граница фонового изображения совпадает с нижняя границей элемента
left | левая граница фонового изображения совпадает с левая границей элемента
right | правая граница фонового изображения совпадает с правая границей элемента
Разное
По умолчанию | 0% 0%
Применимо | к блочным и замененным элементам
Наследование | нет
Процентная запись | Относительно размеров самого элемента
Media | visual

В следующем примере, при помощи свойства background-position, фоновое изображение размещено по центру таблицы. Само фоновое изображение задано при помощи свойства background-image.

 table {background-image: url(picture.jpg); background-position:center center;}

Примечание: NetScape Navigator версии 4.x не поддерживает свойство background-position.


Свойство background

Свойство background применяется для сокращенного задания свойств фона: background-color, background-image, background-repeat, background-attachment и background-position. Использование данного свойства всегда приводит к установке всех свойств фона. Если какое либо значение не указано в данном свойстве, то оно будет установлено в значение по умолчанию. Описание отдельных элементов синтаксиса и их значение можно найти в соответствующих правилах, описывающих отдельные свойства фона.

Синтаксис
background: «background-color» || «background-image» || «background-repeat» || «background-attachment» || «background-position»
Возможные значения и ключевые слова
«background-color» | цвет фона, подробнее смотри свойство background-color
«background-image» | изображение для фона, подробнее смотри свойство background-image
«background-repeat» | тип повторения фонового изображения, подробнее смотри свойство background-repeat
«background-attachment» | привязка изображения к канве браузера, подробнее смотри свойство background-attachment
«background-position» | расположение изображения фона, подробнее смотри свойство background-position
Разные
По умолчанию | не определено
Применимо | ко всем элементам»
Наследование | нет
Процентное значение | применимо к «background-position»
Media | visual

В следующем примере для фона тега body (то есть для всей страницы) заданы следующее значения: для свойства background-image задано значение url(chess.png) (рисунок chess.png), для свойства background-color задано значение gray (серый цвет), для свойства background-position задано значение 50% (рисунок размещен в центре), для свойства background-repeat задано значение repeat (рисунок размножается как по вертикали так и по горизонтали) и для свойства background-position задано значение fixed (рисунок не перемещается при прокрутке документа).

body { background: url(chess.png) gray 50% repeat fixed }


Свойство background-position-x

При помощи свойства background-position-x дизайнер может указать расположение по горизонтали графического элемента, используемого в качестве фона (см background-image). Значение свойства background-position-x может быть задано либо как значение, представляющие собой единицу длины или процентное значения, либо как ключевое слово.

Синтаксис
background-position-x: [«проценты» | «длина»] | [left | center | right]
Возможные значения и ключевые слова
«длина» | расстояние от верхнего или левого края элемента до начала фонового изображения
«проценты» | процентное значение, указывает смещение фонового изображения по длине или ширине.
center | фоновое изображение центрировано по вертикали или горизонтали
left | левая граница фонового изображения совпадает с левая границей элемента
right | правая граница фонового изображения совпадает с правая границей элемента
Разное
По умолчанию | 0%
Применимо | к блочным и замененным элементам
Наследование | нет
Процентная запись | Относительно размеров самого элемента
Media | visual

В следующем примере фоновое изображение для таблицы (тег table) центрировано по горизонтали.

 table {background-image: url(picture.jpg); background-position-x:center;}

Примечание: Cвойство background-position-x является расширением, введенным компанией Microsoft и поддерживается браузером Internet Explorer, начиная с версии 4.0.


Свойство background-position-y

При помощи свойства background-position-y дизайнер может указать расположение по вертикали графического элемента, используемого в качестве фона (см background-image). Значение свойства background-position-y может быть задано либо как значение, представляющее собой единицу длины или процентное значение, либо как ключевое слово.

Синтаксис
background-position: [«проценты» | «длина»] | [top | center | bottom]
Возможные значения и ключевые слова
«длина» | расстояние от верхнего или левого края элемента до начала фонового изображения
«проценты» | процентное значение, указывает смещение фонового изображения по длине или ширине.
top | верхняя граница фонового изображения совпадает с верхней границей элемента
center | фоновое изображение центрировано по вертикали или горизонтали
bottom | нижняя граница фонового изображения совпадает с нижняя границей элемента
Разное
По умолчанию | 0%
Применимо | к блочным и замененным элементам
Наследование | нет
Процентная запись | Относительно размеров самого элемента
Media | visual

В следующем примере фоновое изображение для таблицы (тег table) центрировано по вертикали.

 table {background-image: url(picture.jpg); background-position-y:center;}

Примечание: Свойство background-position-y является расширением, введенным компанией Microsoft и поддерживается браузером Internet Explorer, начиная с версии 4.0.


Свойство layer-background-color

Свойство layer-background-color понимается только браузерами Netscape Navigator версий 4.x. В данных браузерах существует ошибка, связанная с отображением элементов, для которых одновременно заданны свойства background-color и border. В этом случае между фоном и бордюром иногда остается зазор, сквозь который виден фон родительского элемента. Для того что бы исправить данную ошибку и было введено свойство layer-background-color. Свойства layer-background-color в браузерах Netscape Navigator позволяет избежать появления зазора.

Если одновременно заданы значения свойств background-color и layer-background-color и, при этом их значения различны – используется значение background-color, но границы фона устанавливаются правильно. Положение свойств background-color и layer-background-color в таблице стилей друг относительно друга не влияет на результат. Свойство layer-background-color не документировано.

Синтаксис
layer-background-color: «color» | transparent
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
transparent | задает прозрачный фон
Разное
По умолчанию | transparent
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере используются свойства background-color и layer-background-color для задания белого цвета фона для страницы (тег body). Браузеры, отличные от Netscape Navigator версий 4.x будут игнорировать свойство layer-background-color, а браузеры Netscape Navigator версий 4.x будут благодаря этому свойству корректно отображать фон.

body {background-color: #ffffff; layer-background-color: #ffffff;}

Примечание: свойство layer-background-color является нестандартным расширением Netscape Navigator и поддерживается только версиями 4.x


Свойство layer-background-image

Свойство layer-background-image понимается только браузерами Netscape Navigator версий 4.x. В данных браузерах существует ошибка, связанная с отображением элементов, для которых одновременно заданны свойства background-image и border. В этом случае между фоном и бордюром иногда остается зазор, сквозь который виден фон родительского элемента. Для того что бы исправить данную ошибку и было введено свойство layer-background-image. Свойства layer-background-image в браузерах Netscape Navigator позволяет избежать появления зазора.

Если одновременно заданы значения свойств background-image и layer-background-image и, при этом их значения различны – используется значение background-image, но границы фона устанавливаются правильно. Положение свойств background-image и layer-background-image в таблице стилей друг относительно друга не влияет на результат. Свойство layer-background-image не документировано.

Синтаксис
background-image: «url» | none
Возможные значения и ключевые слова
«url» | url графического элемента, используемого в качестве фона
none | отменяет действие данного атрибута
Разное
По умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере используются свойства background-image и layer-background-image для задания изображения laquo;chess.gif» для фона страницы (тег body). Браузеры, отличные от Netscape Navigator версий 4.x будут игнорировать свойство layer-background-image, а браузеры Netscape Navigator версий 4.x будут благодаря этому свойству корректно отображать фон.

body {background-image: url(chess.gif); layer-background-image: url(chess.gif);}

Примечание: свойство layer-background-image является нестандартным расширением Netscape Navigator и поддерживается только версиями 4.x


Свойство -moz-opacity

Свойство -moz-opacity позволяет указать прозрачность html-элемента. Несмотря на то что свойство -moz-opacity не наследуется, его действие распространяется и на дочерние элементы. Если у дочернего элемента так же установлено свойство -moz-opacity, то их значения накапливаются. Значение свойства -moz-opacity может быть определено либо как процентное значение в диапазоне от 0% (полностью прозрачно) до 100% (полностью непрозрачно). Либо как число от 0 (полностью прозрачно) до 1 (соответственно непрозрачно).

Синтаксис
-moz-opacity: inherit | «число» | «проценты»
Возможные значения и ключевые слова
inherit | значение родительского элемента
«число» | десятичное число с точкой в диапазоне от 0 до 1 включительно
«проценты» | процентное значение от 0% до 100% включительно
Разное
Значение по умолчанию | 100%
Применимо | ко всем элементам
Наследование | нет
Процентное значение | да
Media | visual

В следующем примере, при помощи свойства -moz-opacity, для всех изображений задана полупрозрачность.

img -moz-opacity

Примечание: свойство -moz-opacity является нестандартным расширением Netscape Navigator и поддерживается начиная с версии 6.0


Блочные свойства

Категория: Блочные свойства

Данное семейство свойств используется для задания различных размеров элемента и его поведения при разметке страницы

  • Свойство margin-top >>>
  • Свойство margin-right >>>
  • Свойство margin-bottom >>>
  • Свойство margin-left >>>
  • Свойство margin >>>
  • Свойство padding-top >>>
  • Свойство padding-right >>>
  • Свойство padding-bottom >>>
  • Свойство padding-left >>>
  • Свойство padding >>>
  • Свойство border-top-width >>>
  • Свойство border-right-width >>>
  • Свойство border-bottom-width >>>
  • Свойство border-left-width >>>
  • Свойство border-width >>>
  • Свойство border-top-color >>>
  • Свойство border-right-color >>>
  • Свойство border-bottom-color >>>
  • Свойство border-left-color >>>
  • Свойство border-color >>>
  • Свойство border-top-style >>>
  • Свойство border-right-style >>>
  • Свойство border-bottom-style >>>
  • Свойство border-left-style >>>
  • Свойство border-style >>>
  • Свойство border-top >>>
  • Свойство border-right >>>
  • Свойство border-bottom >>>
  • Свойство border-left >>>
  • Свойство border >>>
  • Свойство width >>>
  • Свойство height >>>
  • Свойство float >>>
  • Свойство clear >>>
  • Свойство min-width >>>
  • Свойство max-width >>>
  • Свойство min-height >>>
  • Свойство max-height >>>


Свойство margin-top

Свойство margin-top определяет размер верхнего отступа элемента. Значение данного свойства может быть отрицательным, но могут существовать, зависящие от реализации, ограничения. Пространство, занятое отступом, прозрачно, независимо от установок свойств фона (свойство background).

Синтаксис
margin-top: auto | «длина» | «процентное значение»
Возможные значения и ключевые слова
auto | по умолчанию для данного браузера.
«длина» | для указания используется единицы размера
«процентное значение» | относительно ширины ближайшего блочного элемента-предка
Разное
По умолчанию | 0 - по умолчанию отступ отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | Относительно ширины ближайшего блочного элемента-предка
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство margin-right

Свойство margin-right определяет размер правого отступа элемента. Значение данного свойства может быть отрицательным, но могут существовать, зависящие от реализации, ограничения. Пространство, занятое отступом, прозрачно, независимо от установок свойств фона.

Синтаксис
margin-right: auto | «длина» | «процентное значение»
Возможные значения и ключевые слова
auto | по умолчанию для данного браузера.
«длина» | для указания используется единицы размера
«процентное значение» | относительно ширины ближайшего блочного элемента-предка
Разное
По умолчанию | 0 - по умолчанию отступ отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | относительно ширины ближайшего блочного элемента-предка
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство margin-bottom

Свойство margin-bottom определяет размер нижнего отступа элемента. Значение данного свойства может быть отрицательным, но могут существовать, зависящие от реализации, ограничения. Пространство, занятое отступом, прозрачно, независимо от установок свойств фона.

Синтаксис
margin-bottom: auto | «длина» | «процентное значение»
Возможные значения и ключевые слова
auto | по умолчанию для данного браузера
«длина» | для указания используется единицы размера
«процентное значение» | относительно ширины ближайшего блочного элемента-предка
Разное
По умолчанию | 0 - по умолчанию отступ отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | относительно ширины ближайшего блочного элемента-предка
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство margin-left

Свойство margin-left определяет размер левого отступа элемента. Значение данного свойства может быть отрицательным, но могут существовать, зависящие от реализации, ограничения. Пространство, занятое отступом, прозрачно, независимо от установок свойств фона.

Синтаксис
margin-left: auto | «длина» | «процентное значение»
Возможные значения и ключевые слова
auto | по умолчанию для данного браузера.
«длина» | для указания используется единицы размера
«процентное значение» | относительно ширины ближайшего блочного элемента-предка
Разное
По умолчанию | 0 - по умолчанию отступ отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | относительно ширины ближайшего блочного элемента-предка
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство margin

Свойство margin применяется для сокращенного задания свойств margin-top, margin-right, margin-bottom и margin-left. Значение данного свойства может быть отрицательным, но могут существовать, зависящие от реализации, ограничения. Пространство, занятое отступом, прозрачно, независимо от установок свойств фона. Может использовать от одного до четырех аргументов:

  • если аргумент один - то он используется для всех четырех сторон
  • если аргументов два - то первый используется для свойств margin-top и margin-bottom, а второй для свойств margin-left и margin-right
  • если аргументов три - то первый используется для свойства margin-top, второй - для свойств margin-left и margin-right, а третий - для свойства margin-bottom.
  • если аргументов четыре - то первый используется для свойства margin-top, второй - для свойства margin-right, третий - для свойства margin-bottom, и четвертый для свойства margin-left.
Синтаксис
margin: [ «length» | «percentage» | auto ]{1,4}
Возможные значения и ключевые слова
«length» | любое возможное обозначение длины
«percentage» | по отношению к ширине ближайшего предка
auto | значение по умолчанию для данного браузера
Разное
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | нет
Процентное значение | по отношению к ширине ближайшего предка
Media | visual

Следующий пример задает для параграфов (тег p) отступы сверху и снизу в 2px, а отступы слева и справа в 20px:

p {margin: 2px 20px;}

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство padding-top

Свойство padding-top определяет размер верхней набивки элемента. Значение данного свойства не может быть отрицательным. Набивка форматируется согласно установкам семейства свойств background.

Синтаксис
padding-top: «длина» | «процентное значение»
Возможные значения и ключевые слова
«длина» | для указания используется единицы размера
«процентное значение» | относительно ширины ближайшего блочного элемента-предка
Разное
По умолчанию | 0 - по умолчанию набивка отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | относительно ширины ближайшего блочного элемента-предка
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство padding-right

Свойство padding-right определяет размер правой набивки элемента. Значение данного свойства не может быть отрицательным. Набивка форматируется согласно установкам семейства свойств background.

Синтаксис
padding-right: «длина» | «процентное значение»
Возможные значения и ключевые слова
«длина» | для указания используется единицы размера
«процентное значение» | относительно ширины ближайшего блочного элемента-предка
Разное
По умолчанию | 0 - по умолчанию набивка отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | относительно ширины ближайшего блочного элемента-предка
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство padding-bottom

Свойство padding-bottom определяет размер нижней набивки элемента. Значение данного свойства не может быть отрицательным. Набивка форматируется согласно установкам семейства свойств background.

Синтаксис
padding-bottom: «длина» | «процентное значение»»
Возможные значения и ключевые слова
«длина» | для указания используется единицы размера
«процентное значение» | относительно ширины ближайшего блочного элемента-предка
Разное
По умолчанию | 0 - по умолчанию набивка отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | относительно ширины ближайшего блочного элемента-предка
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство padding-left

Свойство padding-left определяет размер левой набивки элемента. Значение данного свойства не может быть отрицательным. Набивка форматируется согласно установкам семейства свойств background.

Синтаксис
padding-left: «длина» | «процентное значение»
Возможные значения и ключевые слова
«длина» | для указания используется единицы размера
«процентное значение» | относительно ширины ближайшего блочного элемента-предка
Разное
По умолчанию | 0 - по умолчанию набивка отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | относительно ширины ближайшего блочного элемента-предка
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство padding

Свойство padding применяется для сокращенного задания свойств padding-top, padding-right, padding-bottom и padding-left. Значения данного свойства не могут быть отрицательными. Пространство, занятое набивкой, форматируется в соответствии с параметрами, заданными свойствами семейства background. Может использовать от одного до четырех аргументов:

  • если аргумент один - то он используется для всех четырех сторон
  • если аргументов два - то первый используется для свойств padding-top и padding-bottom, а второй для свойств padding-left и padding-right
  • если аргументов три - то первый используется для свойства padding-top, второй - для свойств padding-left и padding-right, а третий - для свойства padding-bottom.
  • если аргументов четыре - то первый используется для свойства padding-top, второй - для свойства padding-right, третий - для свойства padding-bottom, и четвертый для свойства padding-left.
Синтаксис
padding: [ «length» | «percentage» ]{1,4}
Возможные значения и ключевые слова
«length» | любое возможное обозначение длины
«percentage» | по отношению к ширине ближайшего предка
Разное
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | нет
Процентное значение | по отношению к ширине ближайшего предка
Media | visual

Следующий пример задает для параграфов (тег p) набивку сверху и снизу в 20px, а отступы слева и справа в 2px:

p {padding: 20px 2px;}

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство border-top-width

Свойство border-top-width определяет размер верхней части бордюра (рамки) элемента. Значение данного свойства не может быть отрицательным. Числовые значения, соответствующие ключевым словам, зависят от браузера, но всегда выполняется условие thin <= medium <= thick

Синтаксис
border-top-width: thin | medium | thick | «длина»
Возможные значения и ключевые слова
thin | тонкая толщина границы
medium | средняя толщина границы
thick | большая толщина границы
«длина | для указания используется единицы размера
Разное
По умолчанию | medium
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

Примечание: У многих элементов значение по умолчанию отличается от рекомендованного стандартом.


Свойство border-right-width

Свойство border-right-width определяет размер правой части бордюра (рамки) элемента. Значение данного свойства не может быть отрицательным. Числовые значения, соответствующие ключевым словам, зависят от браузера, но всегда выполняется условие thin <= medium <= thick.

Синтаксис
border-right-width: thin | medium | thick | «длина»
Возможные значения и ключевые слова
thin | тонкая толщина границы
medium | средняя толщина границы
thick | большая толщина границы
«длина» | для указания используется единицы размера
Разное
По умолчанию | medium
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual


Свойство border-bottom-width

Свойство border-bottom-width размер нижней части бордюра (рамки) элемента. Значение данного свойства не может быть отрицательным. Числовые значения, соответствующие ключевым словам, зависят от браузера, но всегда выполняется условие thin <= medium <= thick.

Синтаксис
border-bottom-width: thin | medium | thick | «длина»
Возможные значения и ключевые слова
thin | тонкая толщина границы
medium | средняя толщина границы
thick | большая толщина границы
«длина» | для указания используется единицы размера
Разное
По умолчанию | medium
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual


Свойство border-left-width

Свойство border-left-width определяет размер левой части бордюра (рамки) элемента. Значение данного свойства не может быть отрицательным. Числовые значения, соответствующие ключевым словам, зависят от браузера, но всегда выполняется условие thin <= medium <= thick.

Синтаксис
border-left-width : thin | medium | thick | «длина»
Возможные значения и ключевые слова
thin | тонкая толщина границы
medium | средняя толщина границы
thick | большая толщина границы
«длина» | для указания используется единицы размера
Разное
По умолчанию | medium
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual


Свойство border-width

Свойство border-width применяется для сокращенного задания свойств border-top-width, border-right-width, border-bottom-width и border-left-width. Значения данного свойства не могут быть отрицательными. Числовые значения, соответствующие ключевым словам, зависят от браузера, но всегда выполняется условие thin <= medium <= thick. Может принимать от одного до четырех параметров:

  • аргумент один - то он используется для всех четырех сторон
  • аргументов два - то первый используется для свойств border-top-width и border-bottom-width, а второй для свойств border-left-width и border-right-width
  • аргументов три - то первый используется для свойства border-top-width, второй - для свойств border-left-width и border-right-width, а третий - для свойства border-bottom-width.
  • аргументов четыре - то первый используется для свойства border-top-width, второй - для свойства border-right-width, третий - для свойства border-bottom-width, и четвертый для свойства border-left-width.
Синтаксис
border-width: [thin | medium | thick | «length» ]{1,4}
Возможные значения и ключевые слова
thin | тонкая линия
medium | средняя линия
thick | толстая линия
«length» | любое возможное обозначение длины
Разное
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере заголовки первого уровня (тег h1) форматируются с бордюром, выполненным тонкой линией сверху и снизу, и толстой линией слева и справа:

h1 {border-width: thin thick;}

Примечание: вид бордюра определяется так же его стилем, задаваемым свойствами border-style.


Свойство border-top-color

Свойство border-top-color используется для задания цвета верхней части бордюра. Если данное свойство не задано, то цвет наследуется от свойства color того же элемента.

Синтаксис
border-top-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | наследуется от свойства color того же элемента
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, с помощью свойства border-top-color, для параграфов (тег p) задан красный цвет верхней части бордюра

p {border-top-color:red}


Свойство border-right-color

Свойство border-right-color используется для задания цвета правой части бордюра. Если данное свойство не задано, то цвет наследуется от свойства color того же элемента.

Синтаксис
border-right-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | наследуется от свойства color того же элемента
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, с помощью свойства border-right-color, для параграфов (тег p) задан красный цвет правой части бордюра

p {border-right-color:red}


Свойство border-bottom-color

Свойство border-bottom-color используется для задания цвета нижней части бордюра. Если данное свойство не задано, то цвет наследуется от свойства color того же элемента.

Синтаксис
border-bottom-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | наследуется от свойства color того же элемента
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, с помощью свойства border-bottom-color, для параграфов (тег p) задан красный цвет нижней части бордюра

p {border-bottom-color:red}


Свойство border-left-color

Свойство border-left-color используется для задания цвета левой части бордюра. Если свойство border-left-color не задано, то цвет наследуется от свойства color того же элемента.

Синтаксис
border-left-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | наследуется от свойства color того же элемента
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, с помощью свойства border-left-color, для параграфов (тег p) задан красный цвет левой части бордюра

p {border-left-color:red}


Свойство border-color

Свойство border-color применяется для сокращенного задания цветов четырех сторон бордюра, то есть свойств border-left-color, border-top-color, border-right-color и border-bottom-color. Если для элемента не заданы цвета сторон, то используется цвет из свойства color элемента. Может использовать от одного до четырех аргументов:

  • аргумент один - то он используется для всех сторон
  • аргументов два - то первый используется для свойств border-top-color и border-bottom-color, а второй для свойств border-left-color и border-right-color
  • аргументов три - то первый используется для свойства border-top-color, второй - для свойств border-left-color и border-right-color, а третий - для свойства border-bottom-color.
  • аргументов четыре - то первый используется для свойства border-top-color, второй - для свойства border-right-color, третий - для свойства border-bottom-color, и четвертый для свойства border-left-color.
Синтаксис
border-color: «color» {1,4} | transparent
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
transparent | бордюр не отображается, но учитывается его ширина
Разное
По умолчанию | Значение свойства color данного элемента
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, при помощи свойства border-color, для параграфов (тег p) задан красный цвет бордюра для верхней и нижней стороны и зеленый для левой и правой стороны.

p { border-color: red green;}


Свойство border-top-style

Свойство border-top-style используется для задания стиля верхней части бордюра. Так как значением по умолчанию является none, то верхняя часть бордюра не будет отображаться до тех пор, пока это свойство не будет установлено в другое значение.

Синтаксис
border: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Возможные значения и ключевые слова
none | бордюр отсутствует
dotted | линия из точек поверх фона элемента
dashed | линия точка-тире поверх фона элемента
solid | сплошная линия
double | двойная линия поверх фона элемента, суммарная толщина обоих линий и расстояния между ними равна значению свойства border-width элемента
groove | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
ridge | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
inset | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
outset | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
Разное
По умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, при форматировании заголовков первого уровня (тег h1), для верхней части бордюра используется двойная линия.

h1 {border-top-style: double}

Примечание: Internet Explorer 5.0 не поддерживает значения стиля бордюра, отличные от none и solid. Все стили отличные от этих двух воспринимаются как solid.


Свойство border-right-style

Свойство border-right-style используется для задания стиля правой части бордюра. Так как значением по умолчанию является none, то правая часть бордюра не будет отображаться до тех пор, пока это свойство не будет установлено в другое значение.

Синтаксис
border-right-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Возможные значения и ключевые слова
none | бордюр отсутствует
dotted | линия из точек поверх фона элемента
dashed | линия точка-тире поверх фона элемента
solid | сплошная линия
double | двойная линия поверх фона элемента, суммарная толщина обоих линий и расстояния между ними равна значению свойства border-width элемента
groove | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
ridge | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
inset | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
outset | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
Разное
По умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, при форматировании заголовков первого уровня (тег h1), для правой части бордюра используется двойная линия.

h1 {border-right-style: double}

Примечание: Internet Explorer 5.0 не поддерживает значения стиля бордюра, отличные от none и solid. Все стили отличные от этих двух воспринимаются как solid.


Свойство border-bottom-style

Свойство border-bottom-style используется для задания стиля нижней части бордюра. Так как значением по умолчанию является none, то нижняя часть бордюра не будет отображаться до тех пор, пока это свойство не будет установлено в другое значение.

Синтаксис
border-bottom-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Возможные значения и ключевые слова
none | бордюр отсутствует
dotted | линия из точек поверх фона элемента
dashed | линия точка-тире поверх фона элемента
solid | сплошная линия
double | двойная линия поверх фона элемента, суммарная толщина обоих линий и расстояния между ними равна значению свойства border-width элемента
groove | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
ridge | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
inset | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
outset | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
Разное
По умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, при форматировании заголовков первого уровня (тег h1), для нижней части бордюра используется двойная линия.

h1 {border-bottom-style: double}

Примечание: Internet Explorer 5.0 не поддерживает значения стиля бордюра, отличные от none и solid. Все стили отличные от этих двух воспринимаются как solid.


Свойство border-left-style

Свойство border-left-style используется для задания стиля левой части бордюра. Так как значением по умолчанию является none, то левая часть бордюра не будет отображаться до тех пор, пока это свойство не будет установлено в другое значение.

Синтаксис
border-left-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Возможные значения и ключевые слова
none | бордюр отсутствует
dotted | линия из точек поверх фона элемента
dashed | линия точка-тире поверх фона элемента
solid | сплошная линия
double | двойная линия поверх фона элемента, суммарная толщина обоих линий и расстояния между ними равна значению свойства border-width элемента
groove | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
ridge | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
inset | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
outset | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
Разное
По умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, при форматировании заголовков первого уровня (тен h1), для левой части бордюра используется двойная линия.

h1 {border-left-style: double}

Примечание: Internet Explorer 5.0 не поддерживает значения стиля бордюра, отличные от none и solid. Все стили отличные от этих двух воспринимаются как solid.


Свойство border-style

Свойство border-style применяется для сокращенного задания свойств border-top-style, border-right-style, border-bottom-style и border-left-style. Так как значением по умолчанию является none, то бордюр не будет отображаться до тех пор, пока это свойство не будет установлено в другое значение. Может принимать от одного до четырех значений:

  • аргумент один - то он используется для всех четырех сторон
  • аргументов два - то первый используется для свойств border-top-style и border-bottom-style, а второй для свойств border-left-style и border-right-style
  • аргументов три - то первый используется для свойства border-top-style, второй - для свойств border-left-style и border-right-style, а третий - для свойства border-bottom-style
  • аргументов четыре - то первый используется для свойства border-top-style, второй - для свойства border-right-style, третий - для свойства border-bottom-style, и четвертый для свойства border-left-style
Синтаксис
border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Возможные значения и ключевые слова
none | бордюр отсутствует
dotted | линия из точек поверх фона элемента
dashed | линия точка-тире поверх фона элемента
solid | сплошная линия
double | двойная линия поверх фона элемента, суммарная толщина обоих линий и расстояния между ними равна значению свойства border-width элемента
groove | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
ridge | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
inset | псевдотрехмерная вдавленная линия на основе цвета из свойства color элемента
outset | псевдотрехмерная выпуклая линия на основе цвета из свойства color элемента
Разное
По умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, при форматировании заголовков первого уровня (тег h1), используется бордюр в виде двойной линии.

h1 {border-style: double}

Примечание: Браузеры могут интерпретировать значения dotted, dashed, double, groove, ridge, inset и outset как solid.

Примечание: Internet Explorer 5.0 не поддерживает значения стиля бордюра, отличные от none и solid. Все стили отличные от этих двух воспринимаются как solid.


Свойство border-top

Свойство border-top используется для задания в одном месте стиля, цвета и толщины верхней части бордюра. Если один или два параметра данного свойства не заданы, то они устанавливаются в значения по умолчанию.

Синтаксис
border-top: «border-top-width» || «border-style» || «color»
Возможные значения и ключевые слова
«border-top-width» | задает размер бордюра, подробнее смотри свойство border-top-width
«border-style» | задает стиль бордюра, подробнее смотри свойство border-style
«color» | задает цвет бордюра
Разное
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

Следующий пример задает, при помощи свойства border-top, для параграфов (тег p) все три параметра верхней стороны бордюра: для свойства border-top-width задано значение 1px (ширина этой части бордюра - 1px), для свойства border-style задано значение solid (сплошная линия) и для свойства color задано значение grey (серый цвет).

p {border-top: 1px solid grey}


Свойство border-right

Свойство border-right используется для задания в одном месте стиля, цвета и толщины правой части бордюра. Если один или два параметра данного свойства не заданы, то они устанавливаются в значения по умолчанию.

Синтаксис
border-right: «border-right-width» || «border-style» || «color»
Возможные значения и ключевые слова
«border-right-width» | задает размер бордюра, подробнее смотри свойство border-right-width
«border-style» | задает стиль бордюра, подробнее смотри свойство border-style
«color» | задает цвет бордюра
Разное
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

Следующий пример задает для параграфов (тег p) все три параметра правой стороны бордюра: для свойства border-right-width задано значение 1px (ширина этой части бордюра - 1px), для свойства border-style задано значение solid (сплошная линия) и для свойства color задано значение grey (серый цвет).

p {border-right: 1px solid grey}


Свойство border-bottom

Свойство border-bottom используется для задания в одном месте стиля, цвета и толщины нижней части бордюра. Если один или два параметра данного свойства не заданы, то они устанавливаются в значения по умолчанию.

Синтаксис
border-bottom: «border-bottom-width» || «border-style» || «color»
Возможные значения и ключевые слова
«border-bottom-width» | задает размер бордюра, подробнее смотри свойство border-bottom-width
«border-style» | задает стиль бордюра, подробнее смотри свойство border-style
«color» | задает цвет бордюра
Синтаксис
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

Следующий пример задает для параграфов (тег p) все три параметра нижней стороны бордюра: для свойства border-bottom-width задано значение 1px (ширина этой части бордюра - 1px), для свойства border-style задано значение solid (сплошная линия) и для свойства color задано значение grey (серый цвет).

p {border-bottom: 1px solid grey}


Свойство border-left

Свойство border-left используется для задания в одном месте стиля, цвета и толщины левой части бордюра. Если один или два параметра данного свойства не заданы, то они устанавливаются в значения по умолчанию.

Синтаксис
border-left: «border-left-width» || «border-style» || «color»
Возможные значения и ключевые слова
«border-left-width» | задает размер бордюра, подробнее смотри свойство border-left-width
«border-style» | задает стиль бордюра, подробнее смотри свойство border-style
«color» | задает цвет бордюра
Разное
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

Следующий пример задает для параграфов (тег p) все три параметра левой стороны бордюра: для свойства border-left-width задано значение 1px (ширина этой части бордюра - 1px), для свойства border-style задано значение solid (сплошная линия) и для свойства color задано значение grey (серый цвет).

p {border-left: 1px solid grey}


Свойство border

Свойство border используется для того, что бы установить одинаковые ширину, стиль и цвет бордюра для всех четырех сторон. В отличие от свойств margin и padding данное свойство не может устанавливать разные значения для разных сторон бордюра. Для этой цели следует использовать другие свойства бордюра, такие как border-width, border-style, border-color и другие.

Синтаксис
border: «border-width» || «border-style» || «color»
Возможные значения и ключевые слова
«border-width» | ширина бордюра, подробнее смотри свойство border-width
«border-style» | стиль бордюра, подробнее смотри свойство border-style
«color» | любое возможное обозначение цвета
Разное
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | нет
Процентная запись | не применимо
Media | visual

В следующем примере для бордюра заголовков первого уровня (тег h1) заданы следующее значения: для свойства border-color задано значение red (красный цвет), для свойства border-width задано значение 3px (ширина бордюра 3 пикселей) и для свойства border-style задано значение double (двойная рамка):

h1 {border: red 3px double;}


Свойство width

Свойство width может быть применено к текстовым элементам, но наиболее полезно при применении к графическим элементам. Необходимая ширина достигается путем масштабирования изображения. Если при этом свойство height установлено в значение auto, то масштабирование осуществляется с сохранением пропорций. Если оба свойства height и width выставлены в значение auto то размеры элемента определяются браузером. Отрицательные значения не допускаются.

Синтаксис
width: inherit | auto | «размер» | «процентное значение»
Возможные значения и ключевые слова
inherit | значение родительского элемента
auto | размер, определенный браузером
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к ширине родительского элемента
Разное
Значение по умолчанию | auto
Применимо | к блочным и замененным элементам
Наследование | нет
Процентная запись | по отношению к ширине родительского элемента или элемента замены
Media | visual

В следующем пример, при помощи свойства width, для изображений (тег img) задается ширина в 200 пикселей. При помощи того же свойства width, для таблицы (тег table) задается ширина в 80% от ширины родительского элемента.

 img   {width:200px;}
 table {width:80%;}


Свойство height

Свойство height может быть применено к текстовым элементам, но наиболее полезно при применении к графическим элементам. Необходимая ширина достигается путем масштабирования изображения. Если при этом свойство width установлено в значение auto, то масштабирование осуществляется с сохранением пропорций. Если оба свойства height и width выставлены в значение auto то размеры элемента определяются браузером. Отрицательные значения не допускаются. Браузер может игнорировать данное свойство для элементов, не являющихся замененными элементами.

Синтаксис
height: auto | «размер»
Возможные значения и ключевые слова
auto | размер, определенный браузером
«размер» | линейный размер, заданный дизайнером
Разное
Значение по умолчанию | auto
Применимо | к блочным и замененным элементам
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем пример, при помощи свойства height, для изображений (тег img) задается высота в 200 пикселей. При помощи того же свойства height, для таблицы (тег table) задается высота в 80% от высоты родительского элемента.

 img   {height:200px;}
 table {height:80%;}


Свойство float

Свойство floatпозволяет задать режим обтекание элемента. При этом элемент рассматривается как блочный, то есть установка данного свойства в значение left или right перекрывает свойство display и элемент рассматривается как блочный. Данное свойство очень часто используется с графическими элементами, но применимо и к текстовым элементам

Синтаксис
float: left | right | none
Возможные значения и ключевые слова
left | элемент прижат к левому краю и текст обтекает его по правой стороне
right | элемент прижат к правому краю и текст обтекает его по левой стороне
none | отменяет действие данного свойства
Разное
Значение по умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере, при помощи свойства float, объявляются два класса float-left и float-right. Оба класса делают html-элементы плавающими, но первый класс размещает элементы по левой стороне, а второй - по правой.

 .float-left  {float:left}
 .float-right {float:right}


Свойство clear

Свойство clear запрещает размещение плавающих (float) элементов справа и слева от данного элемента. Соответственно если задано значение none - действие данного свойства отменено.

Синтаксис
clear: none | left | right | both
Возможные значения и ключевые слова
none | float-элементы могут располагаться с обеих сторон
left | float-элементы запрещены с левой стороны
right | float-элементы запрещены с правой стороны
both | float-элементы запрещены с обеих сторон
Разное
Значение по умолчанию | none
Применимо | ко всем элементам
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере, при помощи свойства clear, подавляется размещение плавающих элементов (то есть элементов, у которых свойства float отлично от none) слева от заголовка первого уровня (тег h1):

 h1 {clear:left;}


Свойство min-width

Свойство min-width позволяет указать минимальную ширину для элемента. Если ширина элемента, рассчитанная на основе его содержимого или значения свойства width, окажется меньше ширины, указанной в свойстве min-width, то ширина элемента будет установлена на основании значения свойства min-width.

Браузер может определить минимально-допустимое положительное значение для свойства min-width, которое может отличаться от элемента к элементу или зависеть от каких либо условий. Если вычисленное значение свойства min-width окажется меньше допустимого значения, браузер может использовать минимально-допустимое значение.

Синтаксис
min-width: inherit | «размер» | «процентное значение»
Возможные значения и ключевые слова
inherit | значение родительского элемента
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к ширине родительского элемента
Разное
Значение по умолчанию | зависит от браузера
Применимо | ко всем элементам, исключая незаменяемые строковые элементы и табличные элементы
Наследование | нет
Процентная запись | по отношению к ширине родительского элемента
Media | visual

В следующем при помощи свойств min-width и max-width определяется минимальная и максимальна ширина для заголовков первого уровня (тег h1). Если ширина заголовка (рассчитанная, например, на основе его содержимого) окажется меньше 100px, указанный свойством min-width, то браузер будет оперировать шириной, равной 100px. Если ширина заголовка окажется больше указанных свойством max-width 400px, ширина заголовка будет установлена в 400px.

h1 {min-width:100px; max-width:400px}

Примечание: Internet Explorer не поддерживает свойство min-width по версию 6.0 включительно.

Примечание: Netscape Navigator поддерживает свойство min-width начиная с версии 6.0

Примечание: Opera поддерживает свойство min-width начиная с версии 4.0


Свойство max-width

Свойство max-width позволяет указать максимальную ширину для элемента. Если ширина элемента, рассчитанная на основе его содержимого или значения свойства width, окажется больше ширины, указанной в свойстве max-width, то ширина элемента будет установлена на основании значения свойства max-width. Если для элемента значение свойства min-width больше чемзначение свойства max-width, браузер для расчета максимальной ширины будет использовать свойство min-width, а не max-width.

Синтаксис
max-width: inherit | none | «размер» | «процентное значение»
Возможные значения и ключевые слова
inherit | значение родительского элемента
none | нет ограничения на ширину
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к ширине родительского элемента
Разное
Значение по умолчанию | none
Применимо | ко всем элементам, исключая незаменяемые строковые элементы и табличные элементы
Наследование | нет
Процентная запись | по отношению к ширине родительского элемента
Media | visual

В следующем при помощи свойств min-width и max-width определяется минимальная и максимальна ширина для заголовков первого уровня (тег h1). Если ширина заголовка (рассчитанная, например, на основе его содержимого) окажется меньше 100px, указанный свойством min-width, то браузер будет оперировать шириной, равной 100px. Если ширина заголовка окажется больше указанных свойством max-width 400px, ширина заголовка будет установлена в 400px.

h1 {min-width:100px; max-width:400px}

Примечание: Internet Explorer не поддерживает свойство max-width по версию 6.0 включительно.

Примечание: Netscape Navigator поддерживает свойство max-width начиная с версии 6.0

Примечание: Opera поддерживает свойство max-width начиная с версии 4.0


Свойство min-height

Свойство min-height позволяет указать минимальную высоту для элемента. Если высота элемента, рассчитанная на основе его содержимого или значения свойства height, окажется меньше высоты, указанной в свойстве min-height, то высота элемента будет установлена на основании значения свойства min-height. Если на момент использования высота родительского блока не известна (например, она зависит от высоты дочернего блока), то процентное значение свойства min-height игнорируется.

Синтаксис
min-height: inherit | «размер» | «процентное значение»
Возможные значения и ключевые слова
inherit | значение родительского элемента
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к высоте родительского элемента
Разное
Значение по умолчанию | 0
Применимо | ко всем элементам, исключая незаменяемые строковые элементы и табличные элементы
Наследование | нет
Процентная запись | по отношению к ширине родительского элемента
Media | visual

В следующем примере определяется класс «news», для которого заданы, при помощи свойств min-height и max-height, ограничения по высоте от 100px до 400px. Если высота, вычисленная браузером, будет меньше или больше указанного ограничения, то браузер будет использовать в качестве высоты значение либо свойства min-height, либо свойства max-height (соответственно если вычисленная высота будет меньше или больше разрешенного диапазона).

.news {min-height:100px; max-height:100px;}

Примечание: Internet Explorer поддерживает свойство min-width начиная с версии 6.0

Примечание: Netscape Navigator поддерживает свойство min-width начиная с версии 6.0

Примечание: Opera поддерживает свойство min-width начиная с версии 4.0


Свойство max-height

Свойство max-height позволяет указать максимальную высоту для элемента. Если высота элемента, рассчитанная на основе его содержимого или значения свойства height, окажется больше высоты, указанной в свойстве max-height, то высота элемента будет установлена на основании значения свойства max-height.

Если на момент использования высота родительского блока не известна (например, она зависит от высоты дочернего блока), то процентное значение свойства max-height игнорируется. Если для элемента значение свойства min-height больше чем значение свойства max-height, браузер для расчета максимальной высоты будет использовать свойство min-height, а не max-height.

Синтаксис
max-height: inherit | none | «размер» | «процентное значение»
Возможные значения и ключевые слова
inherit | значение родительского элемента
none | нет ограничения на высоту
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к высоте родительского элемента
Разное
Значение по умолчанию | none
Применимо | ко всем элементам, исключая незаменяемые строковые элементы и табличные элементы
Наследование | нет
Процентная запись | по отношению к высоте родительского элемента
Media | visual

В следующем примере определяется класс «news», для которого заданы, при помощи свойств min-height и max-height, ограничения по высоте от 100px до 400px. Если высота, вычисленная браузером, будет меньше или больше указанного ограничения, то браузер будет использовать в качестве высоты значение либо свойства min-height, либо свойства max-height (соответственно если вычисленная высота будет меньше или больше разрешенного диапазона).

.news {min-height:100px; max-height:100px;}

Примечание: Internet Explorer не поддерживает свойство max-width по версию 6.0 включительно.

Примечание: Netscape Navigator поддерживает свойство max-width начиная с версии 6.0

Примечание: Opera поддерживает свойство max-width начиная с версии 4.0


Свойства списков

Категория: Свойства списков

Данное семейство свойств используется для определения свойств списков. Позволяет установить свойства, определяющие положение и тип маркера списка, а так же изображение, заменяющее типовой маркер.

  • Свойство list-style-type >>>
  • Свойство list-style-image >>>
  • Свойство list-style-position >>>
  • Свойство list-style >>>


Свойство list-style-type

Свойство list-style-type определяет тип маркера списка если свойство list-style-image имеет значение none или если графический элемент, на который ссылается свойство list-style-image не может быть отображен. Данное свойство могут имеют только те элементы, у которых значение свойства dispaly соответствует list-item.

Синтаксис
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Возможные значения и ключевые слова
disc | маркер в виде круга
circle | маркер в виде окружности
square | маркер в виде квадрата
decimal | десятичная нумерация элементов списка
lower-roman | нумерация элементов списка малыми римскими цифрами
upper-roman | нумерация элементов списка большими римскими цифрами
lower-alpha | нумерация элементов списка малыми латинскими буквами
upper-alpha | нумерация элементов списка большими латинскими буквами
none | маркер отсутствует
Разное
Значение по умолчанию | disc
Применимо | к элементом с атрибутом display равным list-item
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере определяется два класса: square и fail для элементов списков (тег li). Первый класс, square, просто задает квадратный маркер при помощи свойства list-style-type. Второй класс, fail, определяет изображение в качестве маркера при помощи свойства list-style-image, но если это изображение не будет доступно, то будет использоваться квадратный маркер, заданный свойством list-style-type:

 .square {list-style-type: square;}
 .fail   {list-style-type: square; list-style-image: url(/_images/bullet.gif);}


Свойство list-style-image

Свойство list-style-image определяет графический элемент, который будет выступать в качестве маркера списка. Если графический элемент, назначаемый свойством list-style-image, по каким-либо причинам не может быть отображен или свойство list-style-image установлено в значение none, то вид маркера определяется свойством list-style-type. Свойство list-style-image могут имеют только те элементы, у которых значение свойства dispaly соответствует list-item.

Синтаксис
list-style-image: «url» | none
Возможные значения и ключевые слова
«url» | URL, указывающий на ресурс, содержащий графический элемент
none | отменяет действие данного свойства
Разное
Значение по умолчанию | none
Применимо | к элементом с атрибутом display равным list-item
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере для ненумерованного списка (тег ul) задается маркер, определенный графическим ресурсом, расположенным по адресу «/_images/bullet.gif»

 ul {list-style-image: url(/_images/bullet.gif);}


Свойство list-style-position

Свойство list-style-position определяет расположение маркера по отношению к содержимому элемента. Значение свойства list-style-position определяет, будет ли маркер вынесен за границу элемента списка или будет отображаться в элементе. Свойство list-style-position могут иметь только те элементы, у которых значение свойства dispaly соответствует list-item.

Синтаксис
list-style-position: inside | outside
Возможные значения и ключевые слова
inside | маркер находится на одной линии с элементом списка
outside | маркер вынесен за линию элементов списка
Разное
По умолчанию | outside
Применимо | к элементом с атрибутом display равным list-item
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере, при помощи свойства list-style-position, для ненумерованных списков (тег ul) задается положение маркера вне контейнера списка, а для нумерованных списков (тег ol) в контейнере списка:

 ul {list-style-position: outside;}
 ol {list-style-position: inside;}


Свойство list-style

Свойство list-style применяется для сокращенного задания свойств list-style-type, list-style-image и list-style-position. Свойство list-style-type используется, если не задано свойство list-style-image, или изображение, заданное свойством list-style-image, недоступно.

Синтаксис
list-style: «list-style-type» || «list-style-image» || «list-style-position»
Возможные значения и ключевые слова
«list-style-type» | тип маркера списка, подробнее смотри list-style-type
«list-style-image» | изображение, используемое как маркер списка, подробнее смотри list-style-image
«list-style-position» | расположение маркера списка, подробнее смотри list-style-position
Разное
По умолчанию | не определено
Применимо | к элементам со свойством display равным list-item
Наследование | да
Процентное значение | не применима
Media | visual

В следующем примере для ненумерованных списков (тег ul); заданы следующее значения: для свойства list-style-type задано свойство disc (маркер в виде диска), для свойства list-style-image задано значение none (изображение-маркер отсутствует) и для свойства list-style-position задано значение outside (маркер располагается вне области списка):

ul {list-style: disc none outside;}


Свойства шрифтов

Категория: Свойства шрифтов

Свойства шрифтов будут среди прочих наиболее часто использоваться в определениях стилей.

  • Свойство font-family >>>
  • Cвойство font-style >>>
  • Свойство font-variant >>>
  • Свойство font-weight >>>
  • Свойство font-size >>>
  • Свойство font >>>
  • Cвойство font-stretch >>>
  • Свойство font-size-adjust >>>


Свойство font-family

Значением свойства font-family является список имен семейств шрифтов и групп шрифтов. В отличии от остальных свойств CSS, значения разделены запятыми для того, что бы подчеркнуть, что они являются альтернативами. Наиболее предпочтительным является первый вариант, наименее предпочтительным - последний вариант.

Существует два типа значений, которые могут быть использованы в списке значений свойства font-family. Во первых в списке могут быть имена семейств шрифтов, во вторых - имена групп шрифтов. На текущий момент определены следующие группы шрифтов.

  • serif (например Times)
  • sans-serif (например Helvetica)
  • cursive (например Zapf-Chancery)
  • fantasy (например Western)
  • monospace (например Courier)

Разработчикам каскадных таблиц стилей предлагается использовать имена групп шрифтов в качестве последнего элемента списка. Это гарантирует, что будет задано хоть какое-то значение для данного свойства если браузер не найдет ни одного из указанных шрифтов.

Синтаксис
font-family: [[«семейство шрифтов» | «группа шрифтов»],]* [«семейство шрифтов» | «группа шрифтов»]
Возможные значения и ключевые слова
«семейство шрифтов» | используется для задания имени конкретного шрифта.
«группа шрифтов» | используется для задания имени группы шрифтов
Разное
По умолчанию | зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применима
Media | visual

Следующий пример задает для заголовков <h1> следующие шрифты: verdana, arial, helvetica, sans-serif. Это означает, что вначале браузер попытается найти и применить шрифт Verdana, если это не получится - то шрифт Arial, если не получится и это - то шрифт Helvetica. На крайний случай задано имя группы шрифтов sans-serif.

h1 {font-family: verdana, arial, helvetica, sans-serif}

Примечание: Если имя семейства шрифтов содержит пробелы, то оно должно быть заключено в парные кавычки, в противном случае лидирующие и концевые пробелы будут обрезаны, а последовательно идущие пробелы в середине слова будут заменены на один пробел.


Cвойство font-style

Cвойство font-style позволяет выбрать начертание символов. Существует три варианта. normal - прямое начертание, так же известное в английской документации как roman или upright. italic - наклонное начертание, так же известное как cursive или kursiv. И oblique - наклонное начертание, так же известное в английской литературе как slanted или incline.

Синтаксис
font-style: normal | italic | oblique
Возможные значения и ключевые слова
normal | задает стандартное начертание
italic | задает наклонное начертание italic
oblique | задает наклонное начертание oblique
Синтаксис
По умолчанию | normal
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

В следующем примере, при помощи свойства font-style, заголовки первого уровня (тег h1) форматируются нормально, а заголовки второго уровня (тег h2) форматируются italic:

 h1 {font-style:normal}
 h2 {font-style:italic}

Примечание: Начертания oblique может быть создано браузером из начертания normal путем его наклона.


Свойство font-variant

Свойство font-variant позволяет выводить текст «малыми заглавными» буквами. Если установлено значение normal, то преобразование не производится. Если установлено значение small-caps - то производится. «Малые заглавные» выглядят как заглавные буквы, но меньше их по размеру и имеют слегка измененные пропорции. Спецификация CSS допускает возможность использования в качестве «малых заглавных» автоматически уменьшенных заглавных букв. В крайнем случае должны использоваться заглавные буквы.

Синтаксис
font-variant: normal | small-caps
Возможные значения и ключевые слова
normal | преобразование к малым заглавным не производится
small-caps | преобразование к малым заглавным производится.
Разное
По умолчанию | normal
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере, при помощи свойсва font-variant, осуществляется форматирование заголовков первого уровня (тег h1) стандартным методом, а заголовков второго уровня (тег h2) с преобразованием в «малые заглавные».

h1 {font-variant: normal}
h2 {font-variant: small-caps}


Свойство font-weight

Свойство font-weight позволяет задать жирность шрифта. Значением данного свойства может быть одно из 13 ключевых слов. Ключевые слова 100, 200, 300, 400, 500, 600, 700, 800 и 900 представляют собой упорядоченное множество. При этом каждое следующее ключевое слово описывает как минимум неубывающую жирность. Ключевые слова normal и bold являются синонимами соответственно ключевых слов 400 и 700.

Оставшиеся два ключевых слова bolder и lighter позволяют задать жирность, опираясь на жирность родителя. Ключевое слово bolder задает жирность больше чем у родителя. Ключевое слово lighter - меньше чем у родителя. Дочерние элементы наследуют вычисленное значение жирности, а не ключевые слова.

Синтаксис
font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | bold | lighter | bolder
Возможные значения и ключевые слова
100 | наименьший показатель жирности
200 | такой же или больший показатель, чем 100
300 | такой же или больший показатель, чем 200
400 | такой же или больший показатель, чем 300
500 | такой же или больший показатель, чем 400
600 | такой же или больший показатель, чем 500
700 | такой же или больший показатель, чем 600
800 | такой же или больший показатель, чем 700
900 | наибольший показатель жирности
normal | тот же показатель что и 400
bold | тот же показатель что и 700
lighter | меньшая жирность чем у предка
bolder | большая жирность чем у предка
Разное
По умолчанию | normal
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

В следующем, при помощи свойства font-weight, примере осуществляется форматирование двух заголовков. Заголовок первого уровня (тег h1)форматируется жирным, заголовок второго уровня форматируется обычным шрифтом:

h1 {font-weight:bold}
h2 {font-weight:normal}


Свойство font-size

Свойство font-size позволяет задать размер шрифта. Причем спецификация CSS позволяет сделать это четырьмя различными путями: через указание абсолютного значения, относительного значения, процентного значения и непосредственно длины.

Абсолютный размер. Используется одно из семи ключевых слов. Ключевые слова xx-small, x-small, small, medium, large, x-large, xx-large представляют собой упорядоченное множество. Каждое следующее слово обозначает размер больший предыдущего. Для мониторов масштабный коэффициент составляет приблизительно 1,5. То есть, если ключевому слову medium соответствует размер в 10pt, то для large размер будет приблизительно 15pt. Однако для других носителей коэффициент может отличаться от указанного.

Относительный размер. Рассчитывается на основе размера шрифта родительского элемента и таблицы размеров шрифта. Используется одно из двух ключевых слов: larger или smaller. Например, если для родительского элемента было установлен размер шрифта в medium, значение larger приведет к тому, что текущий элемент будет форматироваться с размером шрифта large. Если размер шрифта родительского элемента не равен в точности табличному значению, то браузер может либо интерполировать размер шрифта текущего элемента между соответствующих табличных данных, либо округлить до ближайшего табличного значения.

Если используется процентное значение или непосредственно значение длины, табличные значения не должны учитываться. Отрицательные значения не разрешены.

Синтаксис
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | «длина» | «процентное значение»
Возможные значения и ключевые слова
xx-small | меньше среднего в 5,0625 раз
x-small | меньше среднего в 3,375 раз
small | меньше среднего в 2.25 раз
medium | среднее начертание
large | больше среднего в 2.25 раз
x-large | больше среднего в 3,375 раз
xx-large | больше среднего в 5,0625 раз
larger | большее, чем у родительского элемента
smaller | меньшее, чем у родительского элемента
«длина» | прямое задание длины (смотри примечание по em и ex)
«процентное значение» | относительно свойства font-size родительского элемента
Разное
По умолчанию | medium
Применимо | ко всем элементам
Наследование | да
Процентное значение | относительно свойства font-size родительского элемента
Media | visual

В следующем примере, при помощи свойства font-size, для заголовков первого уровня (тег h1) задан размер в 23px, а для параграфов (тег p) в 12px:

h1 {font-size:23px}
p  {font-size:12px}

Примечание: Netscape Navigator 4.x использует размер шрифта на 1 меньше, чем заданный, если размер шрифта задан в пикселях.

Примечание: Браузер может варьировать коэффициент пропорциональности при переходе от одного семейства шрифтов к другому.

Примечание: Для всех прочих свойств em и ex относятся к шрифту самого элемента, но для свойства font-size данные единицы относятся к шрифту родительского элемента.


Свойство font

Свойство font применяется для сокращенного задания свойств шрифта, то есть свойств font-style, font-variant, font-weight, font-size, line-height и font-family. Синтаксис данного свойства основан на традиционном способе задания свойств шрифта в типографии. Описание отдельных элементов синтаксиса и их значение можно найти в соответствующих правилах, описывающих отдельные свойства шрифт.

Синтаксис
font: [ «font-style» || «font-variant» || «font-weight» ]? «font-size»[/«line-height» ]? «font-family»
Возможные значения и ключевые слова
«font-style» | стиль шрифта, подробнее смотри свойство font-style
«font-variant» | преобразование регистра, подробнее смотри свойство font-variant
«font-weight» | жирность шрифта, подробнее смотри свойство font-weight
«font-size» | размер шрифта, подробнее смотри свойство font-size
«line-height» | высота строки, подробнее смотри свойство line-height
«font-family» | семейство или группа шрифтов, подробнее смотри свойство font-family
Разное
По умолчанию | не определено
Применимо | ко всем элементам
Наследование | да
Процентное значение | применимо к «font-size» и «line-height»
Media | visual

В следующем примере для параграфов (тег p) заданы следующие значения: для свойства font-variant задано значение small-caps (малые заглавные буквы), для свойства font-size задано значение 120% (от размера шрифта родительского элемента), для свойства line-height задано значение 120% (от размера шрифта самого элемента) и для свойства font-family задано значение fantasy (имя группы шрифтов). Для двух отсутствующих свойств задано значение normal.

p { font: normal small-caps 120%/120% fantasy }


Cвойство font-stretch

Свойство font-stretch позволяет задать расстояние между символами. Для этой цели может использоваться как абсолютные значения, так и относительные. Для задания расстояния между символами в виде абсолютного значения используются ключевые слова ultra-condensed « extra-condensed « condensed « semi-condensed « normal « semi-expanded « expanded « extra-expanded « ultra-expanded, при этом первое приведенное ключевое слово соответствует минимальному возможному расстоянию, а последнее - максимальном.

Ключевые слова «narrower» или «wider» изменяют значение свойства до тех пор, пока не достигнуты крайние значения «ultra-condensed» или «ultra-expanded».

Синтаксис
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | narrower | wider
Возможные значения и ключевые слова
ultra-condensed | cамое маленькое расстояние между символами
extra-condensed | расстояние больше чем ultra-condensed, но меньше чем condensed
condensed | расстояние больше чем extra-condensed, но меньше чем semi-condensed
semi-condensed | расстояние больше чем condensed, но меньше чем normal
normal | нормальное расстояние между символами
semi-expanded | расстояние больше чем normal, но меньше чем expanded
expanded | расстояние больше чем semi-expanded, но меньше чем extra-expanded
extra-expanded | расстояние больше чем expanded, но меньше чем ultra-expanded
ultra-expanded | cамое большое расстояние между символами
narrower | задает расстояние, уменьшенное по отношению к родительскому элементу
wider | задает расстояние, увеличенное по отношению к родительскому элементу
Разное
По умолчанию | normal
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

В следующем примере, при помощи свойства font-stretch, заголовки первого уровня (тег h1) форматируются нормально, а заголовки второго уровня (тег h2) форматируются c увеличенным расстоянием между символами:

 h1 {font-stretch:normal}
 h2 {font-stretch:wider}

Примечание: Internet Explorer версии 6.0 не поддерживает данное свойство.


Свойство font-size-adjust

font-size-adjust В обычных шрифтах субъективно воспринимаемый размер шрифта в основном зависит не от свойства font-size, а от параметра x-height (вертикальный размер строчной буквы «x»). Параметр x-height сильно различается у различных шрифтов, имеющих одно и то же значение свойства font-size. В результате шрифты с одинаковым значением параметра font-size субъективно воспринимаются как шрифты разного размера.

Отношение значения параметра x-height к значению свойства font-size называется аспектом шрифта. Если аспект одного шрифта больше чем аспект другого, то, при одном и том же значении свойства font-size, первый шрифт выглядит больше. Для того, что бы создать субъективное впечатление о равности размеров шрифтов, необходимо увеличить размер второго шрифта так, что бы вертикальный размер строчных букв был одинаковым в обоих шрифтах.

Если задано свойство font-size-adjust, то браузер рассчитывает размер шрифта следующим образом: определяет запрашиваемый аспект (то есть значение свойства font-size-adjust), умножает на размер шрифта и получает тот размер строчных букв (x-height), которые хотел получить web-дизайнер. После этого увеличивая ( или уменьшая) размер шрифта подгоняет реальный размер строчных букв под заданный web-дизайнером.

Синтаксис
font-size-adjust: «число» | none
Возможные значения и ключевые слова
«число» | выбранный web-дизайнером для шрифта аспект
none | отключить данное свойство
Разное
По умолчанию | none
Применимо | ко всем элементам
Наследование | да
Процентное значение | нет
Media | visual

В следующем примере, при помощи свойства font-size-adjust, для шрифта, применяемого к абзацу (тег p), задан аспект, равный 0.50. Поэтому независимо от того, какой шрифт будет выбран, Verdana или Arial, строчные буквы будут иметь размер 10px (размер шрифта, умноженный на аспект шрифта).

 p {font-family:verdana,arial; font-size:20px; font-size-adjust:0.50}

Примечание: Свойство font-size-adjust не поддерживается Internet Explorer вплоть до версии 6.0.

Примечание: Если в свойстве font-family указанно несколько шрифтов, то для получения значения аспекта используется первый указанный в списке шрифт.


Разные свойства

Категория: Разные свойства

Свойства, не включенные в конкретную группу свойств.

  • Свойство behavior >>>
  • Свойство cursor >>>
  • Свойство zoom >>>
  • Свойство accelerator >>>
  • Свойство display >>>


Свойство behavior

Свойство behavior применяется для задания поведения элемента. В качестве значения свойства используется список поведений. С элементом связываются все указанные поведения. Список разделен пробелами.

Синтаксис
behavior: [«binary» | «default» | «htc»] | [«binary» | «default» | «htc»]*
Возможные значения и ключевые слова
«binary» | конструкция вида url(#objID), где objID - атрибут id того бинарного объекта, который реализует поведение. Подробнее смотри Бинарные поведения.
«default» | конструкция вида url(#default#name), где name - имя одного из поведений по умолчанию. Подробнее смотри Поведения по умолчанию.
«htc» | конструкция вида url(location), определяющая положение html-компонента, реализующего данное поведение. Подробнее смотри html-компоненты.
Разное
По умолчанию | отсутствует
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | interactive

В следующем примере, при помощи свойства behavior, для параграфов (тег p) задано поведение, реализованное в файле «my-behavior.htc».

p { behavior: url(my-behavior.htc);}

Примечание: Данное свойство является расширением, введенным компанией Microsoft и поддерживается браузером Internet Explorer, начиная с версии 5.0.


Свойство cursor

Свойство cursor позволяет задать для элемента типа курсора, когда курсор находится над элементом. В качестве значения данного свойства используется список курсоров, разделенных запятой. Если браузер не может найти или отобразить курсор, браузер пытается обработать следующий курсор в списке. Если браузер не распознал ни одного курсора в списке, тип курсора не изменяется.

Синтаксис
cursor: auto | all-scroll | col-resize | crosshair | default | hand | help | move | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | e-resize | w-resize | inherit | «url»
Возможные значения и ключевые слова
«url» | url файла, содержащего курсор
auto | браузер определяет тип курсора на основании содержимого элемента
all-scroll | указывает на то что элемент может прокручиваться во всех направлениях
col-resize | указывает на возможность изменения горизонтальных размеров элемента
crosshair | курсор в виде перекрестья
default | используемый по умолчанию операционной системой курсор
hand | курсор, используемый по умолчанию на гиперссылках (аналогично pointer)
help | указывает на возможность получить справку по элементу
move | указывает на возможность передвижения чего-либо
no-drop | указывает, что перетаскиваемый элемент не может быть перетащен на данный элемент
not-allowed | указывает на невозможность осуществления предполагаемого действия
pointer | курсор, используемый по умолчанию на гиперссылках (аналогично hand)
progress | указывает на внутреннюю обработку данных.
row-resize | указывает на возможность изменения вертикального размера элемента.
text | указывает на редактируемый текст.
vertical-text | указывает на редактируемый вертикальный текст.
wait | указывает на занятость программы.
n-resize | курсор, используемый для изменения размеров слева - направо (аналогично s-resize).
ne-resize | курсор, используемый для изменения размеров вверх-вправо - вниз-влево (аналогично sw-resize).
nw-resize | курсор, используемый для изменения размеров вверх-влево - вниз-вправо (аналогично se-resize).
s-resize | курсор, используемый для изменения размеров слева - направо (аналогично n-resize).
se-resize | курсор, используемый для изменения размеров вверх-влево - вниз-вправо (аналогично nw-resize).
sw-resize | курсор, используемый для изменения размеров вверх-вправо - вниз-влево (аналогично ne-resize).
e-resize | курсор, используемый для изменения размеров вверх - вниз (аналогично w-resize).
w-resize | курсор, используемый для изменения размеров вверх - вниз (аналогично e-resize).
inherit | курсор наследуется от родительского элемента.
Разное
По умолчанию | auto
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Процентное значение | не применимо

В следующем примере для параграфов (тег p) будет задан тип курсора, используемый по умолчанию для реакции на гиперссылки. Так как одни браузеры использует для обозначения этого типа ключевое слово pointer, а другие браузеры - ключевое слово hand, то в определении стиля указаны оба.

Согласно правилу обработки данного свойства сначала браузер попытается обработать первое ключевое слово в списке. Если браузер распознал это ключевое слово (в нашем случае hand), он прекращает дальнейший анализ и использует данное ключевое слово. Если браузер не распознал первое ключевое слово, то он будет анализировать второе ключевое слово, и если распознает его - будет его использовать (в нашем случае pointer).

Примечание: Данное определение стиля позволяет справиться с несогласованностью в определении типа курсора между браузерами Internet Explorer и Netscape Navigator.

 <html>
  <head>
   <style type=text/css>
    p {cursor:hand, pointer}
   </style>
  </head>
 <body>
  <p>При наведении на параграф, курсор
     примет вид руки (указателя)</p>
  </body>
</html>

Совместимость

тип курсора | CSS2 | IE 4.x | IE 5.0 | IE 5.5 | IE 6.0 | NN 6.0
auto | + | + | + | + | + |
all-scroll |  |  |  |  | + |
col-resize |  |  |  |  | + |
crosshair | + | + | + | + | + | +
default | + | + | + | + | + | +
hand |  | + | + | + | + |
help | + | + | + | + | + | +
move | + | + | + | + | + | +
no-drop |  |  |  |  | + |
not-allowed |  |  |  |  | + |
pointer | + |  |  |  | + | +
progress |  |  |  |  | + |
row-resize |  |  |  |  | + |
text | + | + | + | + | + | +
vertical-text |  |  |  |  | + |
wait | + | + | + | + | + | +
n-resize | + | + | + | + | + | +
ne-resize | + | + | + | + | + |
nw-resize | + | + | + | + | + |
s-resize | + | + | + | + | + | +
se-resize | + | + | + | + | + |
sw-resize | + | + | + | + | + |
e-resize | + | + | + | + | + | +
w-resize | + | + | + | + | + | +
inherit | + |  |  |  |  | +
«url» | + |  |  |  | + |

Примечание: Внешний вид курсора, соответствующего тому или иному ключевому слову зависит от настроек системы и может варьироваться в широких пределах.


Свойство zoom

Свойство zoom применяется для задания коэффициента масштабирования элемента. Свойство zoom может использоваться как для увеличения, так и для уменьшения элемента.

Изменение свойства zoom методами DHTML приводит к переформатированию страницы. Хотя свойство zoom не наследуется потомками элемента, оно оказывает влияние на отображение потомков элемента, вследствие того, что оно влияет на отображение элемента и его содержимого.

Синтаксис
zoom: [normal | «число» | «проценты»]
Возможные значения и ключевые слова
normal | масштабирование отсутствует, объект отображается с нормальными размерами
«числоr» | число с плавающей точкой, указывающее коэффициент масштабирования, где 1.0 соответствует отсутствию масштабирования
«проценты» | процентное значение, указывающее коэффициент масштабирования, где 100% соответствуют отсутствию масштабирования
Разное
По умолчанию | normal
Применимо | ко всем элементам
Наследование | нет
Процентное значение | по отношению к нормальному размеру
Media | visual

В следующем примере для изображений (тег img) задано отсутствие масштабирования, а для изображений с классом «big» - масштабирование с коэффициентом 200%.

<html>
 <head>
  <style type='text/css'>
   img     {zoom:normal}
   img.big {zoom:200%}
  </style>
 </head>
 <body>
  <img src='test.gif'>
  <img src='test.gif' class='big'>
</body>
</html>

Примечание: Данное свойство является расширением, введенным компанией Microsoft и поддерживается браузером Internet Explorer, начиная с версии 5.5.


Свойство accelerator

Свойство accelerator используется для выделения части текста, которая обозначает горячую клавишу. Данное свойство не делает выбранную часть текста горячей клавишей, а лишь оформляет ее в соответствии со стилистикой операционной системы.

В операционных системах Windows 2000 и Windows XP данное свойство оказывает эффект либо постоянно, если опция «Скрывать указатели вызова с клавиатуры до нажатия <Alt>» (в английской версии: «Hide keyboard navigation indicators until I use the Alt key») не активна. В противном случае применяется только при нажатии клавиши «ALt». Данную опцию можно найти в «Свойства: Экран» -> закладка «Эффекты» (в английской версии: «Dispay Properties» - закладка «Effects»).

Синтаксис
accelerator: true | false
Возможные значения и ключевые слова
true | форматировать как горячую клавишу
false | не форматировать как горячую клавишу
Разное
По умолчанию | false
Применимо | ко всем элементам
Наследование | нет
Процентное значение | не применимо
Media | visual

В следующем примере буква «N», выделенная тегом span оформляется как горячая клавиша. При этом, если используется операционная система Windows 2000 или Windows XP, то эффект может быть не заметен до нажатия на клавишу «Alt».

<span style="accelerator:true">N</span>

Примечание: Данное свойство является расширением, введенным компанией Microsoft и поддерживается браузером Internet Explorer, начиная с версии 5.0.


Свойство display

Свойство display используется что бы явно указать тип блока, порождаемого элементом. Взависимости от значения display, осуществляется компоновка блоков, порождаемых различными элементами. Если свойство display имеет значение none, то для всех потомков данного элемента принудительно так же устанавливается свойство display со значением none. Если для элемента свойство display установлено в значение run-in или compact, то в зависимости от результирующего типа блока, к нему могут применятся или не применятся свойства, применимые только к блочным или только к строковым элементам

Синтаксис
display: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none
Возможные значения и ключевые слова
inline | приводит к созданию контейнера-строки.
block | приводит к созданию блочного контейнера.
list-item | элемент объявляется элементом списка
run-in | в зависимости от сопутствующих блоков генерирует блочный или строковой контейнер
compact | в зависимости от сопутствующих блоков генерирует блочный или строковой контейнер
marker | значение используется совместно с псевдоэлементами :before и :after, генерирует контейнер маркера
table | элемент объявляется таблицей (генерируется блочный контейнер)
inline-table | элемент объявляется таблицей (контейнер-строка)
table-row-group | элемент объявляется группой строк ячеек таблицы
table-header-group | элемент объявляется группой строк ячеек таблицы, располагается в начале таблицы
table-footer-group | элемент объявляется группой строк ячеек таблицы, располагается в конце таблицы
table-row | элемент объявляется строкой табличных ячеек
table-column-group | элемент объявляется группой колонок ячеек таблицы
table-column | элемент объявляется колонкой ячеек таблицы
table-cell | элемент объявляется ячейкой таблицы
table-caption | элемент объявляется подписью таблицы
none | элемент не генерирует никакого контейнера.
Разное
Значение по умолчанию | block
Применимо | ко всем элементам
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере подавляется вывод всех ссылок с классом »invisible«, при помощи свойства display, установленного в значение none:

a.invisble {display:none}

Примечание: Хотя по умолчанию свойство display имеет значение block, браузеры обычно имеют для всех элементов значения по умолчанию.

Примечание: Браузеры могут игнорировать данное свойство и пользоваться своими установками по умолчанию.

Примечание: Internet Explorer версии 4.x не поддерживает свойство display, за исключением возможности выставить его в значение none.


Свойства scrollbar

Категория: Свойства scrollbar

Приведено описание CSS-свойств, задающих цвета для полос прокрутки.

  • Иллюстрация к scrollbar >>>
  • Свойство scrollbar-3dlight-color >>>
  • Свойство scrollbar-arrow-color >>>
  • Свойство scrollbar-base-color >>>
  • Свойство scrollbar-darkshadow-color >>>
  • Свойство scrollbar-face-color >>>
  • Свойство scrollbar-highlight-color >>>
  • Свойство scrollbar-shadow-color >>>
  • Свойство scrollbar-track-color >>>


Иллюстрация к scrollbar

CSS и scrollbar Компания Microsoft ввела, как расширение стандарта CSS, несколько свойств, определяющих цвета, используемые при отображении полосы прокрутки (scrollbar).

Компоненты scrollbar'а

Полоса прокрутки состоит из следующих частей: фон, ползунок (не отображен на рисунке), активные или неактивные концевые кнопки.

Фон полосы прокрутки задается посредством свойства scrollbar-track-color. Если это свойство не задано, то фон формируется из двух цветов (scrollbar-highlight-color и scrollbar-face-color), расположенных в шахматном порядке (смотри рисунок).

Ползунок отображается точно так же как концевые кнопки, но без стрелки.

Концевые кнопки могут быть либо активными, либо не активными. Различие между активными и не активными кнопками заключается только в цветах, используемых при отображении кнопок. На активной кнопке стрелка изображается при помощи цветов scrollbar-arrow-color. На неактивной кнопке стрелка отображается при помощи цветов scrollbar-shadow-color и scrollbar-highlight-color. Остальные элементы активной и неактивной кнопки полностью совпадают.


Свойство scrollbar-3dlight-color

Свойство scrollbar-3dlight-color применяется к элементам, содержащим полосы прокрутки, и задает цвет для верхней и левой внешней границы бегунка полосы прокрутки и концевых кнопок, подробнее смотри иллюстрацию. Чаще всего элемент имеет полосы прокрутки, при свойстве overflow, установленном в значение scroll.

Синтаксис
scrollbar-3dlight-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | не определено - зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

Следующий пример, при помощи свойства scrollbar-3dlight-color, задает красный цвет для верхней и левой внешней границы бегунка и концевых кнопок полосы прокрутки для текстового поля (тег textarea).

<html>
 <head>
  <style type=text/css>
   textarea {scrollbar-3dlight-color:red}
  </style>
 </head>
 <body>
  <textarea>
   Первая строка
   Вторая строка
   Третья строка
  </textarea>
 </body>
</html>

Примечание: Свойство scrollbar-3dlight-color является расширением спецификации CSS2, введенное компаний Microsoft.

Примечание: Свойство scrollbar-3dlight-color поддерживается начиная с Internet Explorer версии 5.5


Свойство scrollbar-arrow-color

Свойство scrollbar-arrow-color применяется к элементам, содержащим полосу прокрутки, и определяет цвет активных стрелок, то есть стрелок, расположенных на активных кнопках, подробнее смотри иллюстрацию. Чаще всего элемент имеет полосы прокрутки, при свойстве overflow, установленном в значение scroll.

Синтаксис
scrollbar-arrow-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | не определено - зависит от браузера
Разное
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

Следующий пример, при помощи свойства scrollbar-arrow-color, задает красный цвет активных стрелок для текстового поля (тег textarea).

<html>
 <head>
  <style type=text/css>
   textarea {scrollbar-arrow-color:red}
  </style>
 </head>
 <body>
  <textarea>
   Первая строка
   Вторая строка
   Третья строка
  </textarea>
 </body>
</html>

Примечание: Свойство scrollbar-arrow-color является расширением спецификации CSS2, введенное компаний Microsoft.

Примечание: Свойство scrollbar-arrow-color поддерживается начиная с Internet Explorer версии 5.5


Свойство scrollbar-base-color

Свойство scrollbar-base-color применяется к элементам, содержащим полосы прокрутки, и задает цвет, на основе которого строится цветовая схема для полосы прокрутки, подробнее смотри иллюстрацию. Чаще всего элемент имеет полосы прокрутки, при свойстве overflow, установленном в значение scroll.

Синтаксис
scrollbar-base-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | не определено - зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

Следующий пример, при помощи свойства scrollbar-base-color, задает красный цвет как базовый для формирования цветовой схемы полосы прокрутки для текстового поля (тег textarea).

<html>
 <head>
  <style type=text/css>
   textarea {scrollbar-base-color:red}
  </style>
 </head>
 <body>
  <textarea>
  </textarea>
 </body>
</html>

Примечание: свойство scrollbar-base-color является расширением спецификации CSS2, введенное компаний Microsoft.

Примечание: свойство scrollbar-base-color поддерживается начиная с Internet Explorer версии 5.5


Свойство scrollbar-darkshadow-color

Свойство scrollbar-darkshadow-color применяется к элементам, содержащим полосы прокрутки, и задает цвет для нижней и правой внешней границы бегунка полосы прокрутки и концевых кнопок, подробнее смотри иллюстрацию. Чаще всего элемент имеет полосы прокрутки, при свойстве overflow, установленном в значение scroll.

Синтаксис
scrollbar-darkshadow-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | не определено - зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

Следующий пример, при помощи свойства scrollbar-darkshadow-color, задает красный цвет для нижней и правой внешней границы бегунка и концевых кнопок полосы прокрутки для текстового поля (тег textarea).

<html>
 <head>
  <style type=text/css>
   textarea {scrollbar-darkshadow-color:red}
  </style>
 </head>
 <body>
  <textarea>
  </textarea>
 </body>
</html>

Примечание: Свойство scrollbar-darkshadow-color является расширением спецификации CSS2, введенное компаний Microsoft.

Примечание: Свойство scrollbar-darkshadow-color поддерживается начиная с Internet Explorer версии 5.5


Свойство scrollbar-face-color

Свойство scrollbar-face-color применяется к элементам, содержащим полосы прокрутки, и задает цвет фона для бегунка полосы прокрутки и концевых кнопок, а так же один из двух цветов, формирующих фон полосы прокрутки, подробнее смотри иллюстрацию. Чаще всего элемент имеет полосы прокрутки, при свойстве overflow, установленном в значение scroll.

Синтаксис
scrollbar-face-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | не определено - зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

Следующий пример, при помощи свойства scrollbar-face-color, задает красный цвет фона бегунка полосы прокрутки и концевых стрелок и одного из компонентов фона полосы прокрутки для текстового поля (тег textarea).

<html>
 <head>
  <style type=text/css>
   textarea {scrollbar-face-color:red}
  </style>
 </head>
 <body>
  <textarea>
   Первая строка
   Вторая строка
   Третья строка
  </textarea>
 </body>
</html>

Примечание: Свойство scrollbar-face-color является расширением спецификации CSS2, введенное компаний Microsoft.

Примечание: Свойство scrollbar-face-color поддерживается начиная с Internet Explorer версии 5.5


Свойство scrollbar-highlight-color

Свойство scrollbar-highlight-color применяется к элементам, содержащим полосы прокрутки, и задает цвет для верхней и левой внутренней границы бегунка полосы прокрутки и концевых стрелок, так же используется при формировании фона полосы прокрутки и неактивной стрелки, подробнее смотри иллюстрацию. Чаще всего элемент имеет полосы прокрутки, при свойстве overflow, установленном в значение scroll.

Синтаксис
scrollbar-highlight-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | не определено - зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

Следующий пример, при помощи свойства scrollbar-highlight-color, задает красный цвет для верхней и левой внутренней границы бегунка полосы прокрутки и концевых стрелок, одного из цветов фона полосы прокрутки и одного цвета неактивной стрелки, для текстового поля (тег textarea).

<html>
 <head>
  <style type=text/css>
   textarea {scrollbar-highlight-color:red}
  </style>
 </head>
 <body>
  <textarea>
  </textarea>
 </body>
</html>

Примечание: Свойство scrollbar-highlight-color является расширением спецификации CSS2, введенное компаний Microsoft.

Примечание: Свойство scrollbar-highlight-color поддерживается начиная с Internet Explorer версии 5.5


Свойство scrollbar-shadow-color

Свойство scrollbar-shadow-color применяется к элементам, содержащим полосы прокрутки, и задает цвет для нижней и правой внутренней границы бегунка полосы прокрутки и концевых стрелок. Так же значение донного свойства используется как цвет один из двух цветов для формирования неактивных стрелок, подробнее смотри иллюстрацию. Чаще всего элемент имеет полосы прокрутки, при свойстве overflow, установленном в значение scroll.

Синтаксис
scrollbar-shadow-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разное
По умолчанию | не определено - зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

Следующий пример, при помощи свойства scrollbar-shadow-color, задает красный цвет для нижней и правой внутренней границы бегунка полосы прокрутки, концевых стрелок и неактивных стрелок текстового поля (тег textarea).

<html>
 <head>
  <style type=text/css>
   textarea {scrollbar-shadow-color:red}
  </style>
 </head>
 <body>
  <textarea>
  </textarea>
 </body>
</html>

Примечание: Свойство scrollbar-shadow-color является расширением спецификации CSS2, введенное компаний Microsoft.

Примечание: Свойство scrollbar-shadow-color поддерживается начиная с Internet Explorer версии 5.5


Свойство scrollbar-track-color

Свойство scrollbar-track-color применяется к элементам, содержащим полосу прокрутки, и определяет цвет фона для полосы прокрутки, подробнее смотри иллюстрацию. Если свойство scrollbar-track-color не заданно, то используются свойства scrollbar-highlight-color и scrollbar-face-color. Чаще всего элемент имеет полосы прокрутки, при свойстве overflow, установленном в значение scroll.

Синтаксис
scrollbar-track-color: «color»
Возможные значения и ключевые слова
«color» | любое возможное обозначение цвета
Разнео
По умолчанию | не определено - зависит от браузера
Применимо | ко всем элементам
Наследование | да
Процентное значение | не применимо
Media | visual

Следующий пример, при помощи свойства scrollbar-track-color, задает красный цвет фона полосы прокрутки для текстового поля (тег textarea).

<html>
 <head>
  <style type=text/css>
   textarea {scrollbar-track-color:red}
  </style>
 </head>
 <body>
  <textarea>
   Первая строка
   Вторая строка
   Третья строка
  </textarea>
 </body>
</html>

Примечание: Свойство scrollbar-track-color является расширением спецификации CSS2, введенное компаний Microsoft.

Примечание: Свойство scrollbar-track-color поддерживается начиная с Internet Explorer версии 5.5


Свойства позиционирования

Категория: Свойства позиционирования

Свойства, используемые для позиционирования html-элементов. Часто используются в DHTML.

  • Иллюстрация к смещениям >>>
  • Свойство position >>>
  • Свойство left >>>
  • Свойство top >>>
  • Свойство right >>>
  • Свойство bottom >>>
  • Свойство overflow >>>
  • Свойство overflow-x >>>
  • Свойство overflow-y >>>
  • Свойство z-index >>>


Иллюстрация к смещениям

left, right, top и bottom

Рисунок 1
Отрицательные и положительные смещения

Рисунок 2

Свойства left, top, right и bottom задают расстояние от соответствующих сторон (соответственно от левой, верхней, правой и нижней) блока элемента до парных им сторон блока - контейнера, в котором расположен данный элемент (смотри рисунок 1). При этом положительные и отрицательные значения для свойств определяют смещение в соответствии со следующими правилами:

  • положительное значение свойства left обозначает смещение вправо, а отрицательное - влево
  • положительное значение свойства top обозначает смещение вниз, а отрицательное - вверх
  • положительное значение свойства right обозначает смещение влево, а отрицательное - вправо
  • положительное значение свойства bottom обозначает смещение вверх, а отрицательное - вниз

На рисунке 1 значения всех четырех свойств положительны. Поэтому визуально элемент целиком расположен в области, занимаемой его контейнером. Однако если значение какого-либо свойства отрицательно, то элемент будет выходить за пределы своего контейнера. На рисунке 2 изображен случай, когда свойство left имеет отрицательно значение.


Свойство position

Свойство position, вместе со свойством float, используется для выбора одного из четырех алгоритмов, использующихся для вычисления положения блока элемента. Используемый алгоритм так же определяет, будут ли свойства left, top, right и bottom оказывать влияние на положение и размеры блока элемента или нет.

Синтаксис
position: static | relative | absolute | fixed
Возможные значения и ключевые слова
static | Блок элемента позиционируется в соответствии с основным потоком форматирования.
relative | Положение блока элемента вычисляется по алгоритму, используемому для схемы static, потом блок смещается из полученного положения в соответствии со значениями свойств left и top. Расположение последующих элементов рассчитывается согласно схеме static.
absolute | Положение (и возможно размер) блока элемента указывается с помощью свойств left, top, right и bottom, относительно контейнера данного элемента. Абсолютно позиционируемые блоки изымаются из основного потока форматирования. Это означает, что размещение последующих блоков элементов не зависит от этого элемента.
fixed | Положение блока элемента рассчитывается по алгоритму, используемому для схемы absolute, но после позиционирования блок элемента привязывается либо к области просмотра - для устройств, не осуществляющих разбиение документа на страницы, либо к странице - соответственно для устройств разбивающих документ на страницы.
Разное
Значение по умолчанию | static
Применимо | ко всем элементам, за исключением генерируемого контекста
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере, для элемента с идентификатором tester, задана схема absolute и свойства left и top. Так как контейнером для элемента tester является элемент body, то и позиционироваться элемент tester будет относительно элемента body.

<html>
 <head>
  <style type='text/css'>
   #tester {position:absolute; left:10px; top:10px;}
  </style>
 </head>
 <body>
  <div id='tester'>Тест Тест Тест</div>
 </body>
</html>

Примечание: При использовании схем absolute и fixed отступы элементов никогда не перекрываются.

Примечание: Internet Explorer версий 3.х - 5.х не поддерживает значение fixed свойства position.


Свойство left

Свойство left определяет смещение левой стороны блока элемента относительно левой стороны контейнера данного элемента. Положительные значения задают смещения вправо, отрицательные - смещения влево. Так же смотри иллюстрацию.

Синтаксис
left: auto | «размер» | «процентное значение»
Возможные значения и ключевые слова
auto | значение смещения определяется в зависимости от того, какие еще свойства установлены в auto
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к ширине контейнера
Разное
Значение по умолчанию | auto
Применимо | К позиционированным элементам
Наследование | нет
Процентная запись | да - по отношению к ширине родительского элемента
Media | visual

В следующем примере, для элемента с идентификатором tester, задана схема позиционирования absolute и свойство left. Так как контейнером для элемента tester является элемент body, то и позиционироваться элемент tester будет относительно элемента body.

<html>
 <head>
  <style type='text/css'>
   #tester {position:absolute; left:10px;}
  </style>
 </head>
 <body>
  <div id='tester'>Тест Тест Тест</div>
 </body>
</html>


Свойство top

Свойство top определяет смещение верхней стороны блока элемента относительно верхней стороны контейнера данного элемента. Положительные значения задают смещения вниз, отрицательные - смещения вверх. Так же смотри иллюстрацию.

Синтаксис
top: auto | «размер» | «процентное значение»
Возможные значения и ключевые слова
auto | значение смещения определяется в зависимости от того, какие еще свойства установлены в auto
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к высоте контейнера
Разное
Значение по умолчанию | auto
Применимо | К позиционированным элементам
Наследование | нет
Процентная запись | да - по отношению к высоте родительского элемента
Media | visual

В следующем примере, для элемента с идентификатором tester, задана схема позиционирования absolute и свойство top. Так как контейнером для элемента tester является элемент body, то и позиционироваться элемент tester будет относительно элемента body.

<html>
 <head>
  <style type='text/css'>
   #tester {position:absolute; top:10px;}
  </style>
 </head>
 <body>
  <div id='tester'>Тест Тест Тест</div>
 </body>
</html>

Примечание: если высота контейнера не задана непосредственно (то есть определяется содержимым), то процентное значение свойства top рассматривается как значение auto.


Свойство right

Свойство right определяет смещение правой стороны блока элемента относительно правой стороны контейнера данного элемента. Положительные значения задают смещения влево, отрицательные - смещения вправо. Так же смотри иллюстрацию.

Синтаксис
right: auto | «размер» | «процентное значение»
Возможные значения и ключевые слова
auto | значение смещения определяется в зависимости от того, какие еще свойства установлены в auto
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к ширине контейнера
Синтаксис
Значение по умолчанию | auto
Применимо | К позиционированным элементам
Наследование | нет
Процентная запись | да - по отношению к ширине родительского элемента
Media | visual

В следующем примере, для элемента с идентификатором tester, задана схема позиционирования absolute и свойство right. Так как контейнером для элемента tester является элемент body, то и позиционироваться элемент tester будет относительно элемента body.

<html>
 <head>
  <style type='text/css'>
   #tester {position:absolute; right:10px;}
  </style>
 </head>
 <body>
  <div id='tester'>Тест Тест Тест</div>
 </body>
</html>

Примечание: Свойство right поддерживается Internet Explorer начиная с версии 5.0.


Свойство bottom

Свойство bottom определяет смещение нижней стороны блока элемента относительно нижней стороны контейнера данного элемента. Положительные значения задают смещения вверх, отрицательные - смещения вниз. Так же смотри иллюстрацию.

Синтаксис
bottom: auto | «размер» | «процентное значение»
Возможные значения и ключевые слова
auto | значение смещения определяется в зависимости от того, какие еще свойства установлены в auto
«размер» | линейный размер, заданный дизайнером
«процентное значение» | по отношению к высоте контейнера
Синтаксис
Значение по умолчанию | auto
Применимо | К позиционированным элементам
Наследование | нет
Процентная запись | да - по отношению к высоте родительского элемента
Media | visaul

В следующем примере, для элемента с идентификатором tester, задана схема позиционирования absolute и свойство bottom. Так как контейнером для элемента tester является элемент body, то и позиционироваться элемент tester будет относительно элемента body.

<html>
 <head>
  <style type='text/css'>
   #tester {position:absolute; bottom:10px;}
  </style>
 </head>
 <body>
  <div id='tester'>Тест Тест Тест</div>
 </body>
</html>

Примечание: Если высота контейнера не задана непосредственно (то есть определяется содержимым), то процентное значение свойства bottom рассматривается как значение auto.

Примечание: Свойство bottom поддерживается Internet Explorer начиная с версии 5.0.


Свойство overflow

Свойство overflow определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры. Свойство overflow может принимать четыре значения. Каждое значение определяет два аспекта отображения элемента: будет ли отображаться содержимое элемента за пределами блока, отведенного для элемента и будет ли предоставляться пользователю механизм прокрутки. Если значением свойства overflow является auto, браузер выводит содержимое элемента согласно своим установкам, но должен предоставить пользователю возможность прокрутки, в случае если содержимое не помещается в контейнере.

Синтаксис
overflow: visible | hidden | scroll | auto
Возможные значения и ключевые слова
visible | содержимое элемента отображается за его пределами
hidden | содержимое элемента обрезается по его границе
scroll | содержимое элемента отображается только в его границах, но предоставляется механизм прокрутки
auto | алгоритм предусмотренный, браузером (смотри в тексте)
Разное
Значение по умолчанию | visible
Применимо | к блочным элементам и элементам замены
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере свойство overflow для элемента body установлено в значение hidden. Как следствие полосы прокрутки в окне просмотра не отображаются, а та часть html-документа, которая выходит за пределы окна, не отображается и не доступна:

body {overflow:hidden}


Свойство overflow-x

Свойство overflow-x определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры по ширине. Свойство overflow-x может принимать четыре значения. Каждое значение определяет два аспекта отображения элемента: будет ли отображаться содержимое элемента за пределами блока, отведенного для элемента и будет ли предоставляться пользователю механизм прокрутки. Если значением свойства overflow-x является auto, браузер выводит содержимое элемента согласно своим установкам, но должен предоставить пользователю возможность прокрутки, в случае если содержимое не помещается в контейнере.

Синтаксис
overflow-x: visible | hidden | scroll | auto
Возможные значения и ключевые слова
visible | содержимое элемента отображается за его пределами
hidden | содержимое элемента обрезается по его границе
scroll | содержимое элемента отображается только в его границах, но предоставляется механизм прокрутки
auto | алгоритм предусмотренный, браузером (смотри в тексте)
Разное
Значение по умолчанию | visible
Применимо | к блочным элементам и элементам замены
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере свойство overflow-x для элемента body установлено в значение hidden. Как следствие, горизонтальная полоса прокрутки в окне просмотра не отображается, а та часть html-документа, которая выходит за пределы окна по горизонтали, не отображается и не доступна:

body {overflow-x:hidden}

Примечание: Свойство overflow-x является расширением, введенным компанией Microsoft и поддерживается браузером Internet Explorer, начиная с версии 4.0.


Свойство overflow-y

Свойство overflow-y определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры по высоте. Свойство overflow-y может принимать четыре значения. Каждое значение определяет два аспекта отображения элемента: будет ли отображаться содержимое элемента за пределами блока, отведенного для элемента и будет ли предоставляться пользователю механизм прокрутки. Если значением свойства overflow-y является auto, браузер выводит содержимое элемента согласно своим установкам, но должен предоставить пользователю возможность прокрутки, в случае если содержимое не помещается в контейнере.

Синтаксис
overflow-y: visible | hidden | scroll | auto
Возможные значения и ключевые слова
visible | содержимое элемента отображается за его пределами
hidden | содержимое элемента обрезается по его границе
scroll | содержимое элемента отображается только в его границах, но предоставляется механизм прокрутки
auto | алгоритм предусмотренный, браузером (смотри в тексте)
Синтаксис
Значение по умолчанию | visible
Применимо | к блочным элементам и элементам замены
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере свойство overflow-y для элемента body установлено в значение hidden. Как следствие, вертикальная полоса прокрутки в окне просмотра не отображается, а та часть html-документа, которая выходит за пределы окна по вертикали, не отображается и не доступна:

body {overflow-y:hidden}

Примечание: Свойство overflow-y является расширением, введенным компанией Microsoft и поддерживается браузером Internet Explorer, начиная с версии 4.0.


Свойство z-index

Свойство z-index определяет порядок перекрытия элементов. Данное свойство оказывает воздействие на отображение элементов только в том случае, если используется позиционирование элемента (то есть значение свойства position отличается от static). Порядок перекрытия элементов с одинаковым значением свойства z-index определяется порядком следования в исходном коде. Последующие элементы перекрывают предыдущие.

Если значением свойства z-index является число, то данное число задает порядок отображения элемента относительно родительского элемента. Элементы с большим значением перекрывают элементы с меньшими значениями. Кроме того задание числового значения приводит к созданию локального стекирующего контекста. В этом случае свойство z-index, для дочерних элементов, будет задаваться относительно родительского элемента.

Синтаксис
z-index: auto | «целое»
Возможные значения и ключевые слова
auto | порядок перекрытия тот же что и у родительского элемента
«целое» | указанный порядок перекрытия (пояснения в тексте).
Разное
Значение по умолчанию | auto
Применимо | к позиционированным элементам
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере определены три блока. Все три блока абсолютно позиционированы (свойству position присвоено значение absolute). Координаты блоков подобраны так, что все блоки, кроме первого частично перекрываются:

<html>
 <head>
  <style type='text/css'>
   #A {position:absolute; z-index:3; left:50px; top:50;
       width:50px; height:20px; background-color:#FF9999;}
   #B {position:absolute; z-index:2; left:60px; top:60;
       width:50px; height:20px; background-color:#99FF99;}
   #C {position:absolute; z-index:1; left:70px; top:70;
       width:50px; height:20px; background-color:#9999FF;}
  </style>
 </head>
 <body>
  <div id='A'></div>
  <div id='B'></div>
  <div id='C'></div>
 </body>
</html>


Свойства таблиц

Категория: Свойства таблиц

CSS-свойства, определенные для таблиц и их элементов.

  • Свойство border-collapse >>>
  • Свойство border-spacing >>>
  • Свойство caption-side >>>
  • Свойство empty-cell >>>
  • Свойство table-layout >>>


Свойство border-collapse

border-collapse Существует две модели создания бордюров для ячеек таблицы. Первая модель предполагает индивидуальные отдельные бордюры вокруг каждой ячейки (модель форматирования, используемая по умолчанию в HTML), вторая модель использует непрерывную сетку, создающую ячейки (смотри рисунок). Свойство border-collapse позволяет выбрать используемую модель построения таблицы.

Синтаксис
border-collapse: collapse | separate | inherit
Возможные значения и ключевые слова
collapse | общая сетка ячеек
separate | индивидуальные раздельные бордюры
inherit | наследуется значение родительского элемента
Разное
Значение по умолчанию | collapse
Применимо | к элементам типа «table» и «inline-table»
Наследование | да
Процентная запись | не применима
Media | visual

В следующем примере, при помощи свойства border-collapse, для таблицы задана модель с индивидуальными раздельными бордюрами для каждой ячейки.

table {border-collapse:separate}

Примечание: Свойство border-collapse поддерживается Internet Explorer начиная с версии 5.0


Свойство border-spacing

Свойство border-spacing определяет расстояние между ячейками таблицы. Данное свойство действует только в случае в случае, если таблица отображается с раздельной моделью ячеек (то есть свойство border-collapse имеет значение separate). Значением свойства border-spacing может быть одно ли два значения длины или ключевое слово inherit. Если значением свойства border-spacing является одно значение длины, то это значение используется для задания расстояния и по горизонтали и по вертикали. Если заданы оба значения, то первое задает расстояние по горизонтали, а вторая - по вертикали. Значения не могут быть отрицательными.

Синтаксис
border: «length» «length»? | inherit
Возможные значения и ключевые слова
length | задает расстояние между ячейками (подробнее смотри в тексте)
inherit | наследует значение от родительского элемента
Разное
По умолчанию | 0
Применимо | к элементам типа «table» и «inline-table»
Наследование | да
Процентное значение | не применимо
Media | visual

В следующем примере для таблиц, при помощи свойства border-collapse, задана раздельная модель ячеек. А при помощи свойства border-spacing задается расстояние между ячейки по горизонтали 12 пикселей, по вертикали 6 пикселей.

table {border-collapse: separate; border-spacing: 12px 6px}

Примечание: Свойство border-spacing не поддерживается Internet Explorer вплоть до версии 6.0.


Свойство caption-side

Свойство caption-side определяет положение поля заголовка относительно поля таблицы. Данное свойство применимо только к элементам «table-caption».

Синтаксис
caption-side: top | bottom | left | right | inherit
Возможные значения и ключевые слова
top | поле заголовка располагается над полем таблицы.
bottom | поле заголовка располагается ниже поля таблицы.
left | поле заголовка располагается слева от поля таблицы
right | поле заголовка располагается справа от поля таблицы.
inherit | расположение поля заголовка относительно поля таблицы наследуется от родительского элемента
Разное
По умолчанию | top
Применимо | к элементам «table-caption»
Наследование | да
Процентное значение | не применимо
Media | visual

В следующем примере, при помощи свойства caption-side, для всех заголовков таблиц, задается положение под таблицей.

caption {caption-side: bottom}

Примечание: Свойство caption-side не поддерживается Internet Explorer включая версию 6.0


Свойство empty-cell

Свойство empty-cell определяет метод отображения пустых ячеек таблицы в модели с раздельными границами ячеек. Ячейка считается пустой, если в ней нет видимого содержимого за исключением ASCII символов CR («\0D»), LF («\0A»), tab («\09») и пробела («\20»). Символы «&nbsp;» и другие считаются в этом случае видимыми.

Если свойству empty-cell пустой ячейки присвоено значения show, то вокруг ячейки отображается рамка. В случае если свойство empty-cell принимает значение hide, то граница вокруг пустой ячейки отсутствует. Если все ячейки в строке имеют свойство empty-cell, выставленным в hide, и все они пустые, свойству строки display неявно присваивается значение none.

Синтаксис
empty-cell: show | hide | inherit
Возможные значения и ключевые слова
show | вокруг пустых ячеек граница отображается
hide | вокруг пустых ячеек граница не отображается
inherit | режим отображения границы наследуется от родительского элемента
Разное
По умолчанию | show
Применимо | к элементам table-cell
Наследование | да
Процентное значение | не применимо
Media | visual

В следующем примере, при помощи свойства empty-cell, для всех ячеек, создаваемых тегом th, задан режим отображения границы вокруг пустых ячеек.

th {empty-cell: show}

Примечание: Данное свойство не поддерживается Internet Explorer включая версию 6.0


Свойство table-layout

Свойство table-layout позволяет выбрать алгоритм отображения таблицы. Для свойства table-layout доступны два алгоритма – определяемые ключевыми словами auto и fixed. Согласно алгоритму, задаваемому значением auto свойства table-layout, ширина таблицы и отдельных колонок таблицы определяется полным анализом всего содержимого таблицы. С другой стороны значением fixed свойства table-layout, для разметки таблицы назначается алгоритм, определяющий ширину таблицы и ее колонок через свойства html-элементов col и colgroup. Если же эти html-элементы не заданы, то ширина таблицы и колонок вычисляется на основе анализа ячеек первого ряда таблицы.

Таким образом свойство table-layout со значением fixed позволяет сократить время отображения больших таблиц, так как отпадает необходимость дожидаться полной загрузки таблицы для определения ширины таблицы и столбцов.

Синтаксис
table-layout: auto | fixed
Возможные значения и ключевые слова
auto |
fixed |
Разное
Значение по умолчанию | auto
Применимо | элементы со свойством display, установленным в table или inline-table
Наследование | нет
Процентная запись | не применима
Media | visual

В следующем примере, при помощи свойства table-layout, для всех таблиц назначается быстрый алгоритм отображения.

table {table-layout: fixed;}


CSS Свойства

В таблице, приведенной ниже, содержатся полный список атрибутов, описанных в данном разделе. Атрибуты объединены по группам.

Название | Описание
Свойства текста
letter-spacing | Css-свойство letter-spacing указывает дополнительное расстояние между буквами
line-height | Css-свойство line-height задает высоту строки символов
text-align | Css-свойство text-align используется для указания, как будет выравниваться текст внутри элемента
text-decoration | Css-свойство text-decoration описывает эффекты, которые будут применены к текстовому содержимому элемента
text-indent | Css-свойство text-indent используется для формирования отступа красной строки
text-overflow | Css-свойство text-overflow используется для задания режима усечения текстовых строк
text-transform | Css-свойство text-transform позволяет взаимно преобразовывать строчные и заглавные буквы
vertical-align | Css-свойство vertical-align позволяет настроить выравнивание относительно высоты родительского элемента
white-space | Css-свойство white-space определяет алгоритм преобразования последовательностей пробельных символов
word-spacing | Css-свойство word-spacing указывает на дополнительное расстояние между словами
word-wrap | Css-свойство word-wrap определяет, будут ли разрываться слова для переноса или нет
text-align-last | Css-свойство text-align-last используется для указания выравниваться последней или единственной строка в блоке
writing-mode | Css-свойство writing-mode используется для указания алгоритма разметки
Свойства шрифтов
font | Css-свойство font применяется для сокращенного задания свойств шрифта: font-style, font-variant, font-weight, font-size, line-height и font-family
font-family | Значением css-свойства font-family является список имен семейств шрифтов и групп шрифтов
font-size | Css-свойство font-size позволяет задать размер шрифта
font-style | Значением css-свойства font-style является список имен семейств шрифтов и групп шрифтов
font-variant | Css-свойство font-variant позволяет выводить текст малыми заглавными
font-weight | Css-свойство font-weight позволяет задать жирность шрифта
font-stretch | Css-свойство font-stretch позволяет задать расстояние между символами
font-size-adjust | Css-свойство font-size-adjust задает отношение высоты строчной буквы x к высоте шрифта
Свойства цвета и фона
background | Css-свойство background применяется для сокращенного задания свойств фона
background-attachment | Css-свойство background-attachment определяет, должно ли изображение фона быть зафиксированным
background-color | Css-свойство background-color устанавливает цвет фона или делает цвет фона прозрачным
background-image | Css-свойство background-image определяет графический ресурс, используемый в качестве фона
background-position | При помощи css-свойства background-position дизайнер может указать расположение фона
background-position-x | При помощи css-свойства background-position-x дизайнер может указать расположение фона по горизонтали.
background-position-y | При помощи css-свойства background-position-y дизайнер может указать расположение фона по вертикали
background-repeat | Css-свойство background-repeat определяет метод размещения фонового изображения
color | Css-свойство color определяет базовый цвет элемента
layer-background-color | Css-свойство layer-background-color используется только браузерами Netscape Navigator версий 4.x.
layer-background-image | Css-свойство layer-background-image используется только браузерами Netscape Navigator версий 4.x.
Блочные свойства
border | Css-свойство border используется, что бы установить одинаковые ширину, стиль и цвет бордюра для всех четырех сторон
border-bottom | Css-свойство border-bottom используется для задания в одном месте стиля, цвета и толщины нижней части бордюра
border-bottom-color | Css-свойство border-bottom-color используется для задания цвета нижней части бордюра
border-bottom-style | Css-свойство border-bottom-style используется для задания стиля нижней части бордюра
border-bottom-width | Css-свойство border-bottom-width определяет размер нижней части бордюра элемента
border-color | Css-свойство border-color применяется для сокращенного задания цветов четырех сторон
border-left | Css-свойство border-left используется для задания стиля, цвета и толщины левой части бордюра
border-left-color | Css-свойство border-left-color используется для задания цвета левой части бордюра
border-left-style | Css-свойство border-left-style используется для задания стиля левой части бордюра
border-left-width | Css-свойство border-left-width определяет размер левой части бордюра элемента
border-right | Css-свойство border-left используется для задания стиля, цвета и толщины правой части бордюра
border-right-color | Css-свойство border-right-color используется для задания цвета правой части бордюра
border-right-style | Css-свойство border-right-style используется для задания стиля правой части бордюра
border-right-width | Css-свойство border-right-width определяет размер правой части бордюра элемента
border-style | Css-свойство border-style применяется для сокращенного задания стиля бордюра
border-top | Css-свойство border-left используется для задания стиля, цвета и толщины верхней части бордюра
border-top-color | Css-свойство border-top-color используется для задания цвета верхней части бордюра
border-top-style | Css-свойство border-top-style используется для задания стиля верхней части бордюра
border-top-width | Css-свойство border-top-width определяет размер верхней части бордюра элемента
border-width | Css-свойство border-width применяется для сокращенного задания ширины бордюра
clear | Css-свойство clear запрещает размещение плавающих (float) элементов справа и слева
float | Css-свойство float позволяет задать режим обтекание элемента
margin | Css-свойство margin применяется для сокращенного задания свойств отступов
margin-bottom | Css-свойство margin-bottom определяет размер нижнего отступа элемента
margin-left | Css-свойство margin-left определяет размер левого отступа элемента
margin-right | Css-свойство margin-right определяет размер правого отступа элемента
margin-top | Css-свойство margin-top определяет размер верхнего отступа элемента
padding | Css-свойство padding применяется для сокращенного задания свойств набивок
padding-bottom | Css-свойство padding-bottom определяет размер нижней набивки элемента
padding-left | Css-свойство padding-left определяет размер левой набивки элемента
padding-right | Css-свойство padding-right определяет размер правой набивки элемента
padding-top | Css-свойство padding-top определяет размер верхней набивки элемента
width | Css-свойство width определяет ширину элемента
height | Css-свойство height определяет высоту элемента
Свойства scrollbar
scrollbar-3dlight-color | Css-свойство scrollbar-3dlight-color применяется к элементам, содержащим полосы прокрутки, и задает цвет для верхней и левой внешней границы бегунка полосы прокрутки и концевых кнопок.
scrollbar-arrow-color | Css-свойство scrollbar-arrow-color применяется к элементам, содержащим полосу прокрутки, и определяет цвет активных стрелок
scrollbar-base-color | Css-свойство scrollbar-base-color применяется к элементам, содержащим полосы прокрутки, и задает цвет, на основе которого строится цветовая схема для полосы прокрутки.
scrollbar-darkshadow-color | Css-свойство scrollbar-darkshadow-color применяется к элементам, содержащим полосы прокрутки, и задает цвет для нижней и правой внешней границы бегунка полосы прокрутки и концевых кнопок
scrollbar-face-color | Css-свойство scrollbar-face-color применяется к элементам, содержащим полосы прокрутки, и задает цвет фона для бегунка полосы прокрутки и концевых кнопок, а так же один из двух цветов, формирующих фон полосы прокрутки
scrollbar-highlight-color | Css-свойство scrollbar-highlight-color применяется к элементам, содержащим полосы прокрутки, и задает цвет для верхней и левой внутренней границы бегунка полосы прокрутки и концевых стрелок, так же используется при формировании фона полосы прокрутки и неактивной стрелки
scrollbar-shadow-color | Css-свойство scrollbar-shadow-color применяется к элементам, содержащим полосы прокрутки, и задает цвет для нижней и правой внутренней границы бегунка полосы прокрутки и концевых стрелок
scrollbar-track-color | Css-свойство scrollbar-track-color применяется к элементам, содержащим полосу прокрутки, и определяет цвет фона для полосы прокрутки
Разное
behavior | Css-свойство behavior позволяет назначать dhtml-сценарий
cursor | Css-свойство cursor позволяет задать для элемента типа курсора, когда курсор находится над элементом
display | Css-свойство display используется что бы явно указать тип блока, порождаемого элементом
zoom | Css-свойство zoom применяется для задания коэффициента масштабирования элемента
accelerator | Css-свойство accelerator используется для выделения части текста, которая обозначает горячую клавишу
Свойства таблиц
border-collapse | Css-свойство border-collapse позволяет выбрать используемую модель построения таблицы
caption-side | Css-свойство caption-side определяет положение поля заголовка относительно поля таблицы.
empty-cells | Css-свойство empty-cell определяет метод отображения пустых ячеек таблицы в модели с раздельными границами ячеек.
border-spacing | Css-свойство border-spacing определяет расстояние между ячейками таблицы.
table-layout | Css-свойство table-layout позволяет выбрать алгоритм отображения таблицы.
Свойства списков
list-style | Css-свойство list-style применяется для сокращенного задания свойств list-style-type, list-style-image и list-style-position
list-style-image | Css-свойство list-style-image определяет графический элемент, который будет выступать в качестве маркера списка
list-style-position | Css-свойство list-style-position определяет расположение маркера по отношению к содержимому элемента
list-style-type | Css-свойство list-style-type определяет тип маркера списка
Positioning properties
bottom | Css-свойство bottom определяет смещение нижней стороны блока элемента относительно нижней стороны контейнера данного элемента.
left | Css-свойство left определяет смещение левой стороны блока элемента относительно левой стороны контейнера данного элемента
overflow | Css-свойство overflow определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры.
overflow-x | Css-свойство overflow-x определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры по ширине.
overflow-y | Css-свойство overflow-y определяет поведение блочного элемента в ситуациях, когда содержимое такого элемента превышает его размеры по высоте.
position | Css-свойство position используется для выбора одного из четырех алгоритмов, использующихся для вычисления положения блока элемента.
right | Css-свойство right определяет смещение правой стороны блока элемента относительно правой стороны контейнера данного элемента.
top | Css-свойство top определяет смещение верхней стороны блока элемента относительно верхней стороны контейнера данного элемента
z-index | Css-свойство z-index определяет порядок перекрытия элементов.


Селекторы

Категория: Селекторы

Описание типов селекторов, их сопоставления с деревом документа, описание селекторов индивидуальных псевдоклассов и псевдоэлементов.

  • Псевдоклассы>>>
  • Селекторы тегов >>>
  • Селекторы классов >>>
  • Селекторы элементов >>>
  • Комплексные селекторы >>>
  • Контекстные селекторы >>>


Псевдоклассы

Категория: Псевдоклассы

Описание отдельных псевдоклассов.

  • Псевдокласс visited >>>
  • Псевдокласс link >>>
  • Псевдокласс hover >>>
  • Псевдокласс active >>>
  • Псевдокласс focus >>>


Псевдокласс visited

Гиперссылка на документ, который пользователь посетил, отличается от гиперссылки на документ, которого пользователь еще не посещал. В CSS для задания стиля гиперссылок, по которым пользователь уже переходил, используется псевдокласс visited.

Язык документа определяет элементы, служащие точками привязки гиперссылки. Например, в HTML 4.0 псевдоклассы ссылок применяются только к элементам A с атрибутом «href». Таким образом, следующие два объявления CSS2 эквивалентны:

A:visited { color: red }
 :visited { color: red }

В следующем примере определено правило для тех гиперссылок, которые ведут на документы, уже посещенные пользователем. Как видно из примера гиперссылки ведущие на уже посещенные документы будут красными.

a:visited {color:red}


Псевдокласс link

Гиперссылка на документ, который пользователь еще не посетил, отличается от гиперссылки на документ, который пользователь уже посещал. В CSS для задания стиля гиперссылок, по которым пользователь еще не переходил, используется псевдокласс link.

Язык документа определяет элементы, служащие точками привязки гиперссылки. Например, в HTML 4.0 псевдоклассы ссылок применяются к элементам A с атрибутом «href». Таким образом, следующие два объявления CSS эквивалентны:

A:link { color: red }
 :link { color: red }

В следующем примере определено правило для тех гиперссылок, которые ведут на документы, еще не посещенные пользователем. Как видно из примера гиперссылки ведущие на еще не посещенные документы будут зелеными.

a:link {color:green}


Псевдокласс hover

Псевдокласс hover позволяет определить для элемента альтернативный стиль. Этот стиль будет использоваться при проносе какого-либо указывающего устройства (например, мышки) над элементом. Браузеры, не поддерживающие interactive media, могут игнорировать данный псевдокласс. Браузеры, поддерживающие interactive media, могут не изменять те свойства элемента, которые могут привести к изменению разметки. В частности к этим свойствам относятся font-size, width и height.

Спецификация CSS не определяет элементы, к которым применим псевдокласс hover. Спецификация CSS так же не определяет алгоритм переключения элемента между состояниями, в которых псевдокласс hover применим или не применим к элементу.

Если для элементы определен псевдокласс link или visited, то псевдокласс hover должен располагаться после определений этих псевдоклассов, так как в противном случае объявления псевдоклассов link и visited могут перекрыть объявление псевдокласса hover. Так в следующем примере объявление псевдокласса hover следует после объявления всевдоклассов link и visited и, как следствие, при наведении на гипперссылку (тег a), объявление псевдокласса hover будет перекрывать определения псевдоклассов link и visited:

a:visited {color:black}
a:link    {color:blue}
a:hover   {color:red}


Псевдокласс active

Псевдокласс active позволяет определить для элемента альтернативный стиль. Этот стиль используется браузером при активации элемента (например, для гиперссылки в отрезок времени когда пользователь нажал кнопку мыши и моментом, когда пользователь отпустил кнопку мыши). Браузеры, не поддерживающие interactive media, могут игнорировать данный псевдокласс. Браузеры, поддерживающие interactive media, могут не изменять те свойства элемента, которые могут привести к изменению разметки. В частности к этим свойствам относятся font-size, width и height.

Спецификация CSS не определяет элементы, к которым применим псевдокласс active. Спецификация CSS так же не определяет алгоритм переключения элемента между состояниями, в которых псевдокласс active применим или не применим к элементу.

a:active {color:red}

Примечание: Internet Explorer поддерживает псевдокласс active начиная с версии 4.0 и только для гиперссылок (тег a). Псевдокласс используется при активации гиперссылки или выборе гиперссылки клавишей «Tab».

Примечание: Netscape Navigator поддерживает псевдокласс active начиная с версии 6.0. Возможно неправильное отображение на элементах table, textarea и input c атрибутом type равным «password» или «text».

Примечание: Opera поддерживает псевдокласс active начиная с версии 5.0 И только для гиперссылок (тег a).


Псевдокласс focus

Псевдокласс focus позволяет определить для элемента альтернативный стиль. Этот стиль будет использоваться для элемента, владеющего фокусом (то есть получает сообщения от клавиатуры или иным образом обрабатывает текстовыйввод). Браузеры, не поддерживающие interactive media, могут игнорировать данный псевдокласс. Браузеры, поддерживающие interactive media, могут не изменять те свойства элемента, которые могут привести к изменению разметки. В частности к этим свойствам относятся font-size, width и height.

Спецификация CSS не определяет элементы, к которым применим псевдокласс focus. Спецификация CSS так же не определяет алгоритм переключения элемента между состояниями, в которых псевдокласс focus применим или не применим к элементу.

input:focus {color:black}

Примечание: Internet Explorer не поддерживает псевдокласс focus до версии 6.0 включительно.

Netscape Navigator поддерживает псевдокласс focus начиная с версии 6.0 и только для элементов a, input, select и textarea.

Opera поддерживает псевдокласс focus начиная с версии 7.0.


Селекторы тегов

Данная группа селекторов предоставляет возможность для переопределения стиля форматирования элементов HTML-документов, представленных различными тегами. Эта дает автору таблицы стилей возможность самостоятельно настроить метод отображения тех или иных тегов и их содержимого. Синтаксис селекторов тегов предельно прост. В качестве селектора используется имя тега, которому назначается форматирование:

имяТега {декларация}

В теле самого HTML документа никаких изменений не требуется, так как стиль форматирования ассоциируется с именем тега. Ниже приведен пример использования селектора тега:

<html>
 <head>
  <style type='text/css'>
   h1 {font-weight:bold; font-style:italic;}
  </style>
 </head>
 <body>
  <h1>Заголовок</h1>
 </body>
</html>


Селекторы классов

Для улучшения контроля над тегами в HTML был добавлен новый атрибут class. Все элементы внутри тега body (и он сам) могут быть классифицированы. Это означает, что каждому тегу может быть присвоен один или несколько атрибутов class с различными значениями. И стили форматирования будут применены ко всем тегам, обладающим атрибутом class выставленным в указанное значение.

Таким образов правила форматирования, ассоциированные с данным селектором класса применяются ко всем тегам и их содержимому если данные теги имеют в качестве параметра атрибут class со значением, совпадающим с именем селектора. Синтаксис объявления селектора класса:

.className {декларация}

Необходимо отметить точку перед именем класса. Именно точка указывает на то, что данный селектор есть селектор класса. Синтаксис объявления селектора в теге:

<h1 class=className>

При указании класса в теге точка не ставится. В селекторе не может использоваться несколько имен классов, то есть следующая запись будет ошибочной:

.someClassName.otherClassName {декларация}

О том, как использовать несколько классов в одном правиле (не селекторе) несколько имен классов смотри Комплексные селекторы и Контекстные селекторы.


Селекторы элементов

Селектор элемента указывает на конкретный элемент в теле HTML документа. Он используется для уникальной идентификации данного элемента в рамках отдельного документа. Обычно данный элемент каскадных таблиц стилей используется совместно с Dynamic HTML, где позволяет именовать отдельные элементы HTML страницы.

Все правила в таблице стилей, описывающие селекторы элементов начинаются с символа решетки (#). Синтаксис объявления селекторов элементов в таблице стилей:

#имя {декларация}

Синтаксис использования селекторов элементов в HTML-документе:

<tagName id=имя>

Пример

Ниже приведен пример использования селектора элемента для придания одному заголовку жирного и курсивного начертания:

<html>
 <head>
  <style type='text/css'>
   #myId {font-weight:bold; font-style:italic;}
  </style>
 </head>
 <body>
  <h1 id='myId'>Заголовок</h1>
 </body>
</html>


Комплексные селекторы

Иногда возникает потребность определить правило форматирования для некоей совокупности элементов HTML-документа одновременно обладающих несколькими признаками. Наиболее распространенным примером данного типа селекторов является комплексный селектор, описывающий правило для указанного имени тега и указанного имени класса. Общей вид правила для записи комплексных селекторов приведен ниже:

[tagName][.className][:psedoclassName[:psedoclassName] {декларация}

Комплексные селекторы, как видно из правила, не допускают использования более одного имени тега или класса, но позволяют использовать много псевдоклассов. Так же необходимо отметить, что должен соблюдаться порядок, приведенный в правиле, то есть первым должен идти селектор тега, далее должен идти селектор класса и последним идет список псевдоселекторов. Любой из селекторов может быть опущен.

Пример

Ниже приводится пример селектора, описывающего гипессылку (тег <a>) с атрибутом класса установленном в mail, находящимся под курсором (псевдокласс hover) и уже посещенным (псевдокласс - visited):

 a.mail:visited:hover {декларация}


Контекстные селекторы

Так как в основу спецификации HTML была положена идея контейнера, спецификация CSS содержит синтаксическую конструкцию для селектора, определяющего форматирование для элемента, вложенного в другой элемент. При этом элементы, описывающие вложенный элемент и его контейнеры оперируют терминами селекторов. То есть можно задать, например, правило оформления элемента с указанным псевдоклассом, вложенным в элемент с указанным классом.

Для построения контекстного селектора используется перечисление селекторов через пробел. самый первый селектор представляет собой внешний контейнер, последний селектор описывает элемент, к которому и будет применяться указанные правила форматирования:

[[[selector ]selector ]selector ]selector {декларация}


Устройства

Категория: Устройства

Некоторые свойства CSS предназначены только для конкретных устройств.

  • Введение >>>
  • Аппаратно-зависимые таблицы стилей >>>
  • Типы устройств >>>
  • Группы устройств >>>


Введение

Одним из важнейших свойств таблиц стилей является то, что они определяют способ представления документа для различных устройств вывода: монитора, синтезатора речи, устройства печати азбуки Брайля, печатных устройств и т.д.

Некоторые свойства CSS предназначены только для конкретных устройств (например, свойство cue-before предназначено для агентов пользователей, управляющих воспроизведением звука). Однако иногда таблицы стилей, созданные для различных типов устройств, могут использовать одно и то же свойство, но при этом только требовать, чтобы оно принимало различные значения в зависимости от используемого устройства. Например, свойство font-size может использоваться как при работе с монитором, так и с печатающими устройствами. Так как эти два устройства отличны друг от друга, то для одного и того же свойства могут потребоваться различные значения: при отображении документа на экране обычно необходим шрифт большего размера, чем при его выводе на печатающее устройство. Практика свидетельствует, что шрифты семейства sans-serif лучше воспринимаются на экране, а шрифты семейства serifs лучше читаются на бумаге. По этой причине очень важно определять тип устройства, к которому относится таблица стилей или некоторый ее раздел.


Аппаратно-зависимые таблицы стилей

Существует два способа построения аппаратно-зависимых таблиц стилей:

  • Задать целевое устройство с помощью правил @media или @import
    • @import url("loudvoice.css") aural;
@media print {
  /* далее идет таблица стиля для печати */
}
  • Задать конечное устройство в языке документа. Например, в HTML 4.0 атрибут «media» элемента LINK указывает конечное устройство для внешней таблицы стилей:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
      <TITLE>Связь с конечным устройством</TITLE>
      <LINK rel="stylesheet" type="text/css"
     media="print, handheld" href="foo.css">
   </HEAD>
   <BODY>
      <P>Основное тело документа
   </BODY>
</HTML>


Типы устройств

Каждый тип устройства, определенный спецификацией CSS, определяет набор свойств, которые можно использовать для форматирования документа, который будет выведен на это устройство. Агент пользователя, который поддерживает определенный тип устройств, должен уметь использовать все свойства, применяющиеся к данному типу.

Имя | Описание
all | Предназначен для всех устройств.
aural | Предназначен для речевых синтезаторов. Подробную информацию можно получить в разделе о звуковых таблицах стилей.
braille | Предназначен для устройств чтения азбуки Брайля.
embossed | Предназначен для печати азбуки Брайля.
handheld | Предназначен для переносимых портативных устройств (небольшие монохромные экраны с ограниченной полосой частот).
print | Предназначен для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати. Информацию о принципах форматирования, характерных только для устройств с постраничной разбивкой, можно получить в разделе об устройствах постраничного вывода.
projection | Предназначен для настенных презентаций, например, для проекторов или для печати плакатов. Информацию о принципах форматирования, характерных только для устройств с постраничной разбивкой, можно получить в разделе об устройствах постраничного вывода.
screen | В первую очередь предназначен для цветных дисплеев.
tty | Предназначен для устройств, использующих набор символов с фиксированной шириной, например, телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения. Для устройств типа «tty» не следует использовать пикселы.
tv | Предназначен для устройств типа телевизора (для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране, возможность передачи звука).

Названия типов устройств не зависят от регистра. Из-за быстрого изменения технологий в CSS2 не представлен список конкретных типов устройств, выступающих в качестве значений для правила @media.

Примечание. В будущих версиях CSS список устройств, возможно, будет дополнен. Разработчикам не стоит полагаться на названия типов устройств, которые еще не определены в описании CSS.


Группы устройств

Определение каждого свойства CSS сопровождается перечислением типов устройств, для которых оно должно реализовываться конформным агентом пользователя. Т.к. свойства применяются обычно к нескольким устройствам, то в пункте «применяется к устройствам» определения свойства указываются не отдельные типы, а группы устройств. Свойство применяется ко всем типам устройств, принадлежащим хотя бы одной из упомянутых групп устройств. В CSS2 имеются следующие группы устройств:

  • устройства без разбивки или с постраничной разбивкой. «Оба» обозначает, что свойство применяется к обеим группам устройств.
  • устройства визуального, звукового или тактильного форматирования
  • устройства с сеточным (устройства с символьной сеткой) или растровым типом вывода. "Оба" обозначает, что свойство применяется к обеим группам устройств.
  • интерактивные (взаимодействующие с пользователем) или статические (не взаимодействующие с пользователем) устройства. «Оба» обозначает, что свойство применяется к обеим группам устройств.
  • all (включает все типы устройств)

В следующей таблице представлены взаимоотношения между группами устройств и типами устройств:

Типы устройств | Группы устройств
 | без разбивки/с разбивкой | визуальные / звуковые / тактильные | сеточные / растровые | интерактивные / статичные
aural | без разбивки | звуковые | N/A | оба
braille | без разбивки | тактильные | сеточные | оба
emboss | страничные | тактильные | сеточные | оба
handheld | оба | визуальные | оба | оба
print | страничные | визуальные | растровые | статичные
projection | страничные | визуальные | растровые | статичные
screen | без разбивки | визуальные | растровые | оба
tty | без разбивки | визуальные | сеточные | оба
tv | оба | визуальные, звуковые | растровые типа | оба


Типы значений

Категория: Типы значений

Свойства CSS используют различные типы значений для определения внешнего вида html-документа. Типы значений, используемые одним или несколькими свойствами, объясняются в тексте этих свойств. Но есть четыре типа значений, которые используются многими свойствами. Эти свойства и описаны в данном разделе.

  • Представление цвета >>>
  • Единицы размера >>>
  • Процентное значение >>>
  • Url-ссылки >>>


Представление цвета

Цвет в каскадных таблицах стилей может быть задан либо при помощи ключевого слова, либо в цифровом виде, путем указания интенсивностей красной, зеленой и синей компоненты (есть в цветовом пространстве RGB).

Ключевые слова

Цвета, задаваемые через ключевые слова, взяты из палитры Windows-VGA. Спецификация не указывает цифровой эквивалент цветам, задаваемым при помощи ключевых слов. Многие браузеры имеют расширенный набор ключевых слов, соответствующих различным цветам.

Цифровые значения

Спецификация CSS так же позволяет задать цвет в десятичном либо шестнадцатеричном представлении, что позволяет точно установить необходимый цвет.

Десятичное представление в свою очередь может быть задано в двух различных формах. Либо как три числа, каждое в диапазоне от 0 до 255, либо как процентное отношение в диапозоне от 0.0% до 100.0%. Обе формы используют схожий синтаксис:

rgb( Red, Green, Blue)
rgb( Red%, Green%, Blue%)

Значения выходящие за пределы диапазонов должны быть приведены к ближайшей границе диапазона. Так значение 110% будет приведено к значению 100%, а значение 300 будет приведено к значению 255.

Шестнадцатеричное значение так же может быть представлено в двух различных формах. Первая форма предполагает шесть шестнадцатеричных цифр, сгруппированных в три двойки, соответственно rrggbb (где rr - двойка цифр, отвечающих за интенсивность красного цвета, gg - зеленого, bb - синего). Вторая форма предполагает использования всего трех шестнадцатеричных цифр и отображается в синтаксис варианта с шестью цифрами путем удвоения каждой цифры (а не дописыванием нулю). Соответственно значение fed будет представлено значением ffeedd, а не f0e0d0. Оба варианта используют сходный синтаксис:

#rrggdd
#rgb


Единицы размера

Формат представления размера предполагает необязательное использование знака числа, если знак отсутствует, то число предполагается положительным. После знака, если он используется, без разрыва должно идти число, возможно с десятичной точкой. И затем, опять без разрыва, двухбуквенная аббревиатура единицы измерения. После нуля можно не использовать аббревиатуру.

Некоторые свойства могут поддерживать отрицательные значения, однако для таких свойств могут существовать ограничения, связанные с реализацией браузера. Если отрицательные значения данным браузером не поддерживаются, должны быть выбраны наиболее близкие из доступных значений.

Существует два типа представления длины: относительные и абсолютные.

Относительное представление

Относительное представление задает длину относительно другого свойства длины. Поддерживаются следующие относительные размеры длины:

  • em - высота шрифта
  • ex - высота символа X
  • px - пиксели (относится к разрешению устройства вывода)

Примечание: Единицы длины em и ex относятся к характеристикам шрифта самого элемента, за исключением свойства font-size, для которого за основу берутся характеристики шрифта родительского элемента.

Единицы измерения px (пиксели) относятся к разрешению устройства вывода, чаще всего - к дисплею компьютера. Если плотность пикселей устройства вывода очень сильно отличается от плотности пикселей компьютерного дисплея, браузер должен масштабировать значения пикселей.

Примечание: Предлагаемый относительный пиксель представляет собой видимый угол для одного пикселя на устройстве с плотностью пикселей 90dpi и дистанцией читателя от устройства примерно равной длине руки. Для номинальной длины руки в 28 дюймов, видимый угол составляет приблизительно 0,0227 градуса.

Примечание: Если один элемент наследует от другого элемента какое-либо относительное значение, то он наследует именно вычисленное значение, а не относительное значение.

Абсолютные значения

Абсолютные значения применимы тогда, когда заранее известны параметры устройства вывода. Поддерживаются следующие абсолютные единицы измерения:

  • in - дюймы
  • cm - сантиметры
  • mm - миллиметры
  • pt - пункты (1/72 дюйма)
  • pc - пика (16 пунктов)

Если указанная длина не может быть использована, браузер должен попытаться аппроксимировать ее. Все дальнейшие расчеты и наследование определяется на основе данной аппроксимации.


Процентное значение

Формат процентного значения предполагает необязательное использование знака числа, если знак отсутствует, то число предполагается положительным. После знака, если он используется, без разрыва должно идти число, возможно с десятичной точкой и сразу за числом идет символ процента (%).

Процентное значение всегда задается относительно другого элемента. Любое свойство, позволяющее задавать процентное значение, так же определяет относительно какого свойства задается процентное значение.

Примечание: Любое свойство, поддерживающее наследование, наследует вычисленное значение, а не процентное значение.


Url-ссылки

Данный элемент используется для задания внешних элементов стиля, таких как файлы шрифтов или графических элементов. Используется следующий синтаксис для данного типа элементов:

url(uniform resource locator)

Имя ресурса может быть заключено в одинарные или двойные кавычки. Скобки, запятые, пробельные символы, а также одинарные и двойные кавычки, являющиеся частью имени ресурса должны предваряется слеш-символом (\). Так для ресурса images/(css)map.gif url-элемент должен быть оформлен следующим образом:

url(images/\(css\)map.gif)

Частичные имена ресурсов отсчитываются от положения файла, содержащего таблицу стилей, а не от html-файла, использующего данную таблицу стилей. Если таблица стилей внедрена в документ, это не оказывает какого либо влияния, но если html-документ и таблица стилей расположены в разных файлах, то используется приведенное выше правило.

Примечание: NetScape Navigator версии 4.x при указании относительного пути во внешней таблице стилей, отсчитывает путь от html-документа, а не от расположения внешней таблицы стилей. По этому для создания страниц, одинаково отображаемых в Internet Explorer'е и в Netscape Navigator'е необходимо пользоваться либо абсолютными адресами, либо указывать тег <base> в заголовке.


Copyright

Авторские права

Авторские права принадлежат автору этого документа. Вы можете свободно использовать и копировать этот документ при условии, что этот документ не будут подвергаться изменениям. При использовании материалов из данного документа ссылка на http://www.webber.ru/index.html обязательна.


CSS

Категория: CSS

Справочное руководство по каскадным таблицам стилей

  • Cвязывание c документом>>>
  • Группы CSS-свойств >>>
  • Селекторы>>>
  • Устройства>>>
  • Типы значений>>>
  • Введение в CSS >>>